vue项目中引入scss全局变量的多种姿势

vue项目中引入sass全局变量的多种姿势

现在脚手架里几乎都集成了less、sass，使用变量的时候，可能都会有如何引入的疑惑，今天就整理一些方式，供大家学习了解。

本文已sass项目为例

局部引入变量文件

虽然日常开发中很少有这种需求，但是也是可以的，就是在你需要的模板引入变量文件即可在当前模板内使用，这种引入方式的变量其它模板是不可用！

这种局部引入变量的文件，不需要安装其它插件，可以直接引入，缺点就是每个文件手动引入，太麻烦了。

<template>
  <div>
    <p class="c-green">color: green</p>
    <p class="c-blue">color: green</p>
  </div>
</template>
<script>
export default {
};
</script>

<style lang="scss" scoped>
// 我给assets设置了路径别名，所以写~assets就行了
// 变量仅在当前模板内可用
@import "~assets/styles/variables.scss";

.c-green{
  color: $cgreen;
}
.c-blue{
  color: $cgreen2;
}
</style>

全部引入变量文件，方法一

需要安装一个sass-loader。

npm install sass sass-loader -D

找到vue.config.js文件，如果没有的话，则自己在根目录新建一个即可
在文件内编写如下代码：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
         //注意：sass-loader将文件引用写入每个组件，适合全局引入变量，但不适合在单页面应用中添加样式，如果是全局样式（非变量），建议在main.js里引入
         // 路径支持别名的写法，案例就是用了路径别名，如果你没有在项目里设置，也可以自己手动设置即可
        // sass-loader v10以下老版本 用的是prependData，不是additionalData
        // 给 sass-loader 传递选项
          // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
          // 因为 `scss` 语法在内部也是由 sass-loader 处理的
          // 但是在配置 `data` 选项的时候
          // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
          // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
        additionalData: `@import "@/styles/variable.scss";`
      }
    }
  }
}

修改完vue.config.js文件，重启项目才会生效。

全部引入变量文件，方法二

需要安装一个style-resources-loader 、vue-cli-plugin-style-resources-loader。

npm install style-resources-loader vue-cli-plugin-style-resources-loader -D

找到vue.config.js文件，如果没有的话，则自己在根目录新建一个即可
在文件内编写如下代码：

const path = require('path');
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
        preProcessor: 'scss',
        // 这三种 patterns 写法都是可以的
        // patterns: ["./src/assets/variables1scess", "./src/assets/variables2scess"]
        // patterns: "./src/assets/variables.scss"
        patterns: [
            // 两种路径写法都可以，这里的路径不能使用 @ 符号，否则会报错
            // path.resolve(__dirname, './src/assets/variables.scss')
            path.resolve(__dirname, 'src/assets/variables.scss')
        ]
    }
  }
};

修改完vue.config.js文件，重启项目才会生效。

全部引入变量文件，方法三

需要安装一个 sass-resources-loader

npm install sass-resources-loader -D

找到vue.config.js文件，如果没有的话，则自己在根目录新建一个即可
在文件内编写如下代码：

module.exports = {
  chainWebpack: (config) => {
    const oneOfsMap = config.module.rule("scss").oneOfs.store;
    oneOfsMap.forEach(item => {
      item
        .use("sass-resources-loader")
        .loader("sass-resources-loader")
        .options({
          // 这里的路径不能使用 @ 符号，否则会报错
          // resources: ["./src/assets/variables1.scss", "./src/assets/variables2.scss"]
          resources: "./src/assets/variables.scss"
        })
        .end()
    })
  }
};

修改完vue.config.js文件，重启项目才会生效。