详解Vue2 添加对scss的支持
2019-01-09 00:03
639 查看
引入loader
cnpm install node-sass --save-dev cnpm install sass-loader --save-dev cnpm install style-loader --save-dev
scss支持
为了使用scss,我们需要先安装相关的node包:
npm install --save style-loader sass-loader node-sass file-loader
安装好之后,为了可以在.vue和.scss中使用,需要在webpack.config.js中配置对应的解析器:
var webpack = require('webpack'); module.exports = { entry: ['./src/entry.js'], output: { path: __dirname, filename: 'build/main.js' }, resolve: { alias: { 'vue': 'vue/dist/vue.js' } }, module: { loaders: [{ test: /\.vue$/, loader: 'vue-loader', options: { loaders: { scss: 'style-loader!css-loader!sass-loader' } } }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },{ test: /\.css$/, loader: ['style-loader', 'css-loader'] }, { test: /\.scss$/, loader: ['style-loader', 'css-loader', 'sass-loader'] }, { test: /\.(png|jpg|jpeg|gif|bmp)$/, loader: ['file-loader?limit=7000&name=build/assets/[name].[ext]'] } ] } };
关于上面resolve的配置,是因为编译和打包源文件默认不一样。
测试scss
打开PageTwo.vue测试一下:
<style lang="scss" scoped> section { & > div { font-size: 20px; } } </style>
编译正常。
本篇最终项目文件Github地址:github.com/yelloxing/vue.quick/tree/V6
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 如何为asp.net core添加protobuf支持详解
- 详解SpringBoot 添加对JSP的支持(附常见坑点)
- U-BOOT 移植过程详解:添加一块新板子的支持
- mpvue添加对scss的支持
- U-BOOT 移植过程详解:添加一块新板子的支持
- 详解Vue2 无限级分类(添加,删除,修改)
- 详解如何在Android Studio中添加RecyclerView-v7支持包
- 详解Spring Boot 添加JSP支持
- U-BOOT移植过程详解: 添加一块新板子的支持
- 详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
- U-BOOT 移植过程详解:添加一块新板子的支持
- U-BOOT 移植过程详解:添加一块新板子的支持
- Spring boot 添加jsp支持配置详解
- 给Aptana Studio添加aspx页面支持
- Linux下添加硬盘,分区,格式化详解
- iOS学习之UINavigationController详解与使用(一)添加UIBarButtonItem
- 为extjs项目添加图表支持
- bootstrap添加多个模态对话框支持
- 为应用程序添加脚本支持
- SpringBoot 添加JSP 支持并附带在IDEA下创建JSP文件【测试无误】