关于如何在Vue中使用scss

1. 在 Vue 中使用 scss

下面示例的环境是用vue-cli搭建，因此目录结构会与其他方式搭建的项目目录结构有所区别。
使用 npm 进行包管理。

1. 安装相关依赖
   Vue 的 webpack 项目中需要安装上 node-sass(Sass语言包)、sass-loader、style-loader，所以需要先通过命令行安装。

   # 一次性安装全部
   npm i node-sass sass-loader style-loader -D
   

2. 在 webpack 中配置 loader
   在项目中的/build/webpack.base.config.js文件的module.export内的module.rules中加入解析 scss 文件的 loader：

   module.exports = {
     // other configurations...
     module: {
       rules: [
         // ...
         {
           test: /\.scss$/,
           loaders: ['style','css','sass']
         }
       ]
     }
   }
   

3. 在 .vue文件中指定 <style>标签的语言为 scss

   <style lang="scss">
   /* scss code */
   </style>
   

如果以上步骤都是正确完成，运行代码还是报错，可以检查是否是 sass 依赖的版本过高导致的（因为我就遇到过这个问题），试试看 sass-loader 安装 ^7.3.1 的版本能否解决你的问题。

scss 是可以和 scoped属性同时使用的。

<style lang="scss" scoped>
/* scss code */
</style>

2. 在Vue中全局引入scss文件

写 scss 代码的时候会发现，有很多重复的 scss 代码（比如 mixins、常量等）。

如果我们将这些重复的代码单独拎出来放在一个 scss 文件中，每次使用的时候，再引入这个 scss 文件，那么最后，这个 scss 文件会被多次载入（import调用了几次，就会被载入几次），这种方式不用都知道问题很大。

<style lang="scss">
  import '../style/style.scss';
</style>

那么就需要一种配置，就像Vue.use()那样，一经引入，全局可用。这个时候，就要用到sass-resources-loader。

1. 安装sass-resources-loader依赖。

   # 命令行敲入
   npm install sass-resources-loader --save-dev
   

2. 配置全局 scss 文件路径。
   在/build/utils.js文件下找到下面指定的这行代码

   // ...
   exports.cssLoaders = function (options) {
     // ...
     return {
       // ...
       scss: generateLoaders('sass'), /* 找到这行代码 */
       // ...
     }
   }
   

   替换成下面所示的内容

   // ...
   exports.cssLoaders = function (options) {
     // ...
     return {
       // ...
       scss: generateLoaders('sass').concat(
         {
           loader: 'sass-resources-loader',
           options: {
             /* 后面的文件路径就是你所需要引入的全局scss文件路径 */
             resources: path.resolve(__dirname, '../src/style/style.scss')
           }
         }
       ),
       // ...
     }
   }
   

   resources属性支持数组值，可添加多个scss文件。

3. 重启服务
   utils.js文件的修改需要重启服务才能生效，执行npm run dev重启。