1 创建一个基于 webpack 模板的新项目
$ vue init webpack myvue
2 在当前目录下, 安装依赖
- $ cd myvue
- $ npm install
3 安装 sass 的依赖包
- npm install --save-dev sass-loader
- //sass-loader 依赖于 node-sass
- npm install --save-dev node-sass
4 在 build 文件夹下的 webpack.base.conf.js 的 rules 里面添加配置
- {
- test: /\.sass$/,
- loaders: ['style', 'CSS', 'scss']
- }
如下图所示:
5 在 APP.vue 中修改 style 标签
<style lang="scss">
6 然后运行项目
$ npm run dev
7 修改 APP.vue 的样式, 可以看下效果
8 运行结果背景变成灰色吗, 说明你已成功配置好 sass
总结
以上所述是小编给大家介绍的在 vue 项目中使用 sass 的配置方法, 希望对大家有所帮助, 如果大家有任何疑问请给我留言, 小编会及时回复大家的在此也非常感谢大家对脚本之家网站的支持!
来源: http://www.jb51.net/article/136744.htm