使用vue-cli搭建的vue项目,默认是不支持scss的,需要安装相应的插件才得以支持,下面说一下安装使用方法
执行下面命令,安装sass-loader 和 node-sass组件
npm install --save-dev sass-loader
npm install --save-dev node-sass
执行下面命令,安装scss 和 scss-loader组件(如果不安装这两个,在修改外部引用的scss文件时报错./node_modules/css-loader?{"minimize":false,"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?)
npm install --save-dev scss
npm install --save-dev scss-loader
在vue组件里的style标签添加lang="scss" <style lang="scss">,然后style里面的样式就可以使用scss语法。如果在style中引入外部scss文件,@import './scss/common';
如果在main.js中引入scss文件,使用import './scss/common.scss'
注:在style和js中引入scss文件的区别是,style中import前需要加@后面需要加分号,不需要写文件后缀.scss。在js中前后不需要加@和分号,但是文件名后面必须加后缀.scss,不然会报错