标签：scss vue assets sass loader 全局变量 resources

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
        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文件，重启项目才会生效。

标签：scss,vue,assets,sass,loader,全局变量,resources
来源： https://www.cnblogs.com/jiaoshou/p/16223930.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。