首页 / VUE / vue2配置scss的方法步骤
vue2配置scss的方法步骤
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vue2配置scss的方法步骤,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1062字,纯文字阅读大概需要2分钟。
内容图文
![vue2配置scss的方法步骤](/upload/InfoBanner/zyjiaocheng/332/c93fc02b8e274258ba27ddcfc6f9a224.jpg)
1、安装文件
npm install --save-dev sass-loader npm install --save-dev node-sass
2、配置 webpack.base.conf.js
找到webpack.base.conf.js文件的module模块下面的rules添加以下代码
... { test: /\.scss$/, loaders: ["style", "css", "sass"] }, ...
注意:这里loaders和文件中其他配置不同加了s
3、使用
1、在使用的地方如下写法
<style lang="scss" scoped> div { a { color: red } } </style>
2、@import外部导入,如果不加scoped如果在app.vue中导入那么就是全局scss
<style lang="scss" scoped> @import './assets/scss/global.scss'; * { color: red } </style>
这样写下面的覆盖外部引入的
注意遇到的坑
报错
/node-sass/vendor no such file or directory in node-sass......
解决方法,运行 rebuild解决了
npm/cnpm rebuild node-sass --save-dev
更详细的解决方案如下:
根据package.json,进行npm install node_modules, 运行npm run dev时候,报错,错误如下.
查看node_modules文件夹,发现,并无vender 文件夹.如下图:
解决办法:
上图node-sass文件夹下,新建 vender 文件夹.然后运行,npm rebuild node-sass --save-dev,之后,查看node-sass文件夹,如下图所示:
就可以了
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
内容总结
以上是互联网集市为您收集整理的vue2配置scss的方法步骤全部内容,希望文章能够帮你解决vue2配置scss的方法步骤所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。