Vue架手架开发使用sass

Posted 2020-10-30 造轮子

vue默认采用的是原生的css，如果想要使用css预编译工具，比如sass，需要下载对应的scss的loader，

具体是

1 npm install --save-dev sass-loader
2 npm install --save-dev node-sass

之后在vue脚手架的webpack.base.conf.js文件下，加入对应的代码

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

就是对.scss文件的处理。

而vue文件中，想要直接在style中写代码，需要给style加上 lang=“scss” 属性。

这样就可以直接在vue文件中写sass的css预编译代码了。