其他分享
首页 > 其他分享> > vue项目中引入scss全局变量的多种姿势

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
        additionalData: `@import "@/styles/variable.scss";`
      }
    }
  }
}

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

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

需要安装一个style-resources-loadervue-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