CSS 预编译语言 变量全局引用方式 [email protected] stylus/sass/less 使用方法

引言

网上相关博客与教程很多，但是解决方式有些不明确，在此统一总结一下sass、stylus、less预编译css全局引用方法，每个均介绍三种方案，皆为本人实测，以下方案为vue-cli@3.0使用方法，使用较低版本的前端朋友可以参考，本人精力有限，暂时就只提供3.0版本解决方案。

因为有的小伙伴有一种或多种方法不生效，因此写了一个简单的例子，可以通过github下载，sass、less、stylus的三种方案都有
代码地址：https://github.com/rudyLittleLove/global-variable

stylus篇

stylus文件与vue组件样式代码

/* variable.styl*/
$color = #00ffff

// vue组件内的style标签，将要使用上述变量的地方
<style lang="stylus">
.stylus
  > div
    color $color
</style>

stylus 全局变量引入方法一

使用css.loaderOptions

module.exports = {
  css: {
    loaderOptions: {
      stylus: {
        import: "~@/assets/variable.styl"
        // import: ["~@/assets/variable.styl", "~@/assets/variable2.styl"]
      }
    }
  }
}

stylus 全局变量引入方法二

使用chainWebpack
需要安装 style-resources-loader 插件

module.exports = {
  chainWebpack: config => {
	const oneOfsMap = config.module.rule("stylus").oneOfs.store;
    oneOfsMap.forEach(item => {
      item
        .use("style-resources-loader")
        .loader("style-resources-loader")
        .options({
          // 需要插入的文件路径
          patterns: "./src/assets/variable.styl"
          // 需要插入的文件路径数组
          // patterns: ["./path/to/vars.styl", "./path/to/mixins.styl"]
        })
        .end();
    });
  }
}

stylus 全局变量引入方法三

使用pluginOptions
需要执行 vue add style-resources-loader命令
命令执行会自动安装 vue-cli-plugin-style-resources-loader会自动提示使用什么预编译语言、会根据你选择的自动配置，只需要填写 引用文件的路径
友情提示：如果使用此方法安装了以上插件，而又放弃这种方案，编译时可能会报错，可以npm uninstall vue-cli-plugin-style-resources-loader 卸载此插件。

module.exports => {
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "stylus",
      patterns: "./src/assets/variable.styl"
      // patterns: ["./src/assets/variable.styl"]
    }
  }
}

sass/scss篇

sass/scss文件与vue组件样式代码

/* variable.scss */
$color: orange;

// vue组件内的style标签，将要使用上述变量的地方
<style lang="scss">
.scss div {
  color: $color;
}
</style>

sass 全局变量引入方法一

使用css.loaderOptions
此处友情提示 sass-loader v7 之前使用 data：’’ 之后使用prependData：‘’请根据项目sass-loader版本选择
重点提示！！！！ 引用处分号“；”不能缺少，缺少直接报错，因为此方法是直接插入语句块至项目中使用sass语法的标签内，sass语法强制必须使用分号“；”结尾，更详细讲解请参考vue-cli官方文档。
vue-cli向预处理器 Loader 传递选项
sass与scss区别请别处学习
SCSS 与 Sass 异同

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // data：`@import "~@/assets/variable.scss";` v7之前使用 的是data，现在改成了prependData
        prependData: `@import "~@/assets/variable.scss";`
        /* prependData: `
              @import "~@/assets/variable.scss";
              @import "~@/assets/variable2.scss";
          ` */
      }
    }
  }
}

sass 全局变量引入方法二

使用chainWebpack
根据使用方法选择安装插件 style-resources-loader或者sass-resources-loader
友情提醒：**patterns: “./src/assets/variable.scss”**引用的scss文件，如果文件内语法存在问题，也会直接报错，此处不需要在引用处最后添加分号“；”，文件内请根据sass与scss语法规则编辑，如果我没有料错，此方法应该是把引用文件的内容插入目标文件，而非上文方法提到的插入一个import
使用方法代码如下：

module.exports = {
  chainWebpack: config => {
	// 需要安装 style-resources-loader 插件
    const oneOfsMap = config.module.rule("scss").oneOfs.store;
    oneOfsMap.forEach(item => {
      item
        .use("style-resources-loader")
        .loader("style-resources-loader")
        .options({
          // 需要插入的文件路径
          patterns: "./src/assets/variable.scss"
          // 需要插入的文件路径数组
          // patterns: ["./path/to/vars.styl", "./path/to/mixins.styl"]
        })
        .end();
    });
    // 也可以使用 sass-resource-loader 插件
    // const oneOfsMap = config.module.rule("scss").oneOfs.store;
    // oneOfsMap.forEach(item => {
    //   item
    //     .use("sass-resources-loader")
    //     .loader("sass-resources-loader")
    //     .options({
    //       // 需要插入的文件路径
    //       resources: "./src/assets/variable.scss"
    //       // 需要插入的文件路径数组
    //       // resources: ["./path/to/vars.scss", "./path/to/mixins.scss"]
    //     })
     //    .end();
    });
  }
}

sass 全局变量引入方法三

使用pluginOptions
需要执行 vue add style-resources-loader命令
命令执行会自动安装 vue-cli-plugin-style-resources-loader会自动提示使用什么预编译语言、会根据你选择的自动配置，只需要填写 引用文件的路径
友情提示：如果使用此方法安装了以上插件，而又放弃这种方案，编译时可能会报错，可以npm uninstall vue-cli-plugin-style-resources-loader 卸载此插件。

const path = require("path");

module.exports = {
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "scss",
	//  patterns: "./src/assets/variable.scss",
      patterns: [path.resolve(__dirname, "./src/assets/variable.scss")]
    }
  }
}

less篇

less文件与vue组件样式代码

/* variable.less */
@color: pink;

// vue组件内的style标签，将要使用上述变量的地方
<style lang="less">
.less {
  > div {
    color: @color;
  }
}
</style>

less 全局变量引入方法一

使用css.loaderOptions
less此方法只支持变量key:value赋值，若要使用less文件中变量，请使用以下两种方案

module.exports = {
  css: {
  	loaderOptions: {
	  less: {
        globalVars: {
          "@color": "#f00"
        }
      }
	}
  }
}

less 全局变量引入方法二

使用chainWebpack
需要安装 style-resources-loader 插件

module.exports = {
  chainWebpack: config => {
	// 需要安装 style-resources-loader 与stylus一致
    const oneOfsMap = config.module.rule("less").oneOfs.store;
    oneOfsMap.forEach(item => {
      item
        .use("style-resources-loader")
        .loader("style-resources-loader")
        .options({
          // 需要插入的文件路径
          patterns: "./src/assets/variable.less"
          // 需要插入的文件路径数组
          // patterns: ["./path/to/vars.less", "./path/to/mixins.less"]
        })
        .end();
    });
  }
}

less 全局变量引入方法三

使用pluginOptions
需要执行 vue add style-resources-loader命令
命令执行会自动安装 vue-cli-plugin-style-resources-loader会自动提示使用什么预编译语言、会根据你选择的自动配置，只需要填写 引用文件的路径
友情提示：如果使用此方法安装了以上插件，而又放弃这种方案，编译时可能会报错，可以npm uninstall vue-cli-plugin-style-resources-loader 卸载此插件。

module.exports = {
  pluginOptions: {
  	"style-resources-loader": {
      preProcessor: "less",
      patterns: "./src/assets/variable.less"
      // patterns: ["./src/assets/variable.less"]
    }
  }
}

总结

问题

使用path与不使用区别请自行学习，本文乃各种用法演示
http://nodejs.cn/api/path.html

以上解决方案带来的实际效果是变量插入到了目标文件，但不单单是变量会插入，链接文件所有数据都会插入到目标文件中，比如css 函数、mixin 也是一样的，借用此方式可以完成更多功能，大家可以自行思考。

再贴一遍以上例子的github仓库地址
https://github.com/rudyLittleLove/global-variable

如有错误，欢迎指正，谢谢