vue项目中配置scss
阅读原文时间:2023年07月08日阅读:2

之前创建 vue 项目的时候没有选择 scss 预编译,现在项目中要使用,不知道如何配置,网上搜了下全都是:

npm  install sass-loader --save-dev
npm install node-sass --sava-dev

然后在build文件夹下的 webpack.base.conf.js 的rules里面添加配置

{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}

我就纳闷了,我项目里并没有build文件夹和 webpack.base.conf.js 。

难道是版本问题?查看vue-cli 版本,3.0+

百度~,果然,3.0+版本,没有了build文件,只需要 cmd 执行

npm install -D sass-loader node-sass

style标签添加 lang 属性就能用了

$color:red;

div {

h1 {color:$color;}

}

官方文档连接

https://cli.vuejs.org/zh/guide/css.html#%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8

新手博客,请多多指教