首页
前端开发
Webpack
Vue 2添加SCSS支持详解

Vue 2添加SCSS支持详解

0 次浏览 0 条评论
pdf
pdf

Vue2 项目的样式用起来总觉得不够灵活？加上对SCSS的支持，样式管理马上就清爽多了。你只需要装几个 loader，像node-sass、sass-loader这些，配置好 Webpack 就能直接在.vue文件里写 SCSS，支持变量、嵌套啥的，维护起来舒服多了。下面这套配置我自己试过，比较稳，适合老项目升级或新项目快速上手。

先装依赖，建议直接用npm（或cnpm也行）：

npm install --save-dev node-sass sass-loader style-loader file-loader

在webpack.config.js里加上对.scss的解析支持：

module: {
  rules: [
    {
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
    }
  ]
}

改完重启一下服务，SCSS 基本就能愉快用了。像你要在App.vue里这样写：

<style lang="scss" scoped>
$main-color: #42b983;


.title {
  color: $main-color;
}
</style>

哦对了，如果你想批量导入 SCSS 目录里的文件，推荐看看sass-bulk-import-loader，我之前用它配全局变量文件，挺方便。

另外还有个小坑，新版本的node-sass有时候装不上，遇到问题建议直接换成sass配合sass-loader，兼容性更好。

如果你是刚上手Vue2的，可以先从这个入门项目跑起来，配个 SCSS 环境练手也顺。

pdf 文件大小：25.99KB