vue支持scss

使用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,不然会报错

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容