首页 > 开发 > JS > 正文

详解Vue2 添加对scss的支持

2024-05-06 16:47:32
字体:
来源:转载
供稿:网友

引入loader

cnpm install node-sass --save-devcnpm install sass-loader --save-devcnpm 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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持VeVb武林网。


注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表