配置less
- 修改webpack.config.js配置文件
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
- npm下载安装包,-D代表使用依赖
cnpm i style-loader less-loader -D
- .vue文件添加样式,加上scoped是为了在当前vue文件下生效,不写默认全局样式全局生效
<style scoped lang="less">
li{
a{
color:red;
}
}
</style>
- 运行,这里我没有打包成index.html文件,直接在cmd环境下运行
npm run dev
可能会出现如下错误:loaderContext.getResolve is not a function
因为下载的less-loader安装包版本太高导致不兼容,我们只需要重新下载less-loader低版本安装包就可以了,直接在后面加上@5,或者指定版本号
npm i less-loader@5
如果写了依赖可以在package.json中看到以下信息:
终止刚刚的服务器,在运行一次就可以啦!
字体颜色是刚刚设置的颜色:
配置sass
sass的配置跟less步骤一样,只是安装包不一样
- 修改webpack.config.js配置文件
{
test: /\.sass$/,
loaders: ['style', 'css', 'sass']
}
本来自动生成的配置上加上这两行
scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
- npm下载安装包
cnpm i sass-loader node-sass -D
- .vue文件添加样式,文本为绿色
<style scoped lang="scss">
li{
a{
color:green;
}
}
- 运行,直接在cmd环境下运行
npm run dev
可能又会出现版本不兼容的问题
loaderContext.getResolve is not a function
解决:
更换低版本包,或者一开始就指定版本。
cnpm i sass-loader@4 -D
重新运行npm run dev
- 修改样式成功啦