Vue 配置全局样式（style-resources-loader）

一、简介

• 在样式引入时，对于变量的引入，需要在每个文件里都要引入一遍，为了避免每次使用时都需要单独引入一遍的问题，采用了 style-resources-loader。

• 在确保安装指定 CSS 解析器 插件（less、less-loader | stylus、stylus-loader ...）后。

• 这里以 less 举例，新建一个 reset.less (文件名随意)，路径为 @/assets/reset.less。

  

• 单页面导入示例：

  <style lang="less" scoped>
  
  // 这里的路径不能使用 @ 符号，否则会报错
  // @import "@/assets/reset.less";
  @import "../assets/reset.less";
  
  .content {
    color: @dzm-color;
  }
  
  </style>
  

• 单纯的在 main.js 文件中引入是无法实现全局样式的 import '@/assets/reset.less'，这种方式是错误的。

• 下面两种配置方式都不需要在 main.js 文件中引入 import '@/assets/reset.less'，配置好之后直接使用即可。

二、配置方式一

• 安装 style-resources-loader

  $ npm i style-resources-loader
  

• 安装 vue-cli-plugin-style-resources-loader

  $ npm i vue-cli-plugin-style-resources-loader
  

• 创建 vue.config.js，加入下面配置

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

三、配置方式二

• 安装 style-resources-loader

  $ npm i style-resources-loader
  

• 创建 vue.config.js，加入下面配置

  module.exports = {
    // 安装：style-resources-loader
    chainWebpack: (config) => {
      const oneOfsMap = config.module.rule("less").oneOfs.store;
      oneOfsMap.forEach(item => {
        item
          .use("style-resources-loader")
          .loader("style-resources-loader")
          .options({
            // 这里的路径不能使用 @ 符号，否则会报错
            // patterns: ["./src/assets/reset1.less", "./src/assets/reset2.less"]
            patterns: "./src/assets/reset.less"
          })
          .end()
      })
    }
  };
  

四、上面两种方式选一种

• 配置好之后，重新运行项目进行测试

  <template>
    <!-- 内容 -->
    <div class="content">DZM - Test</div>
  </template>
  
  <script>
  export default {
  }
  </script>
  
  <style lang="less" scoped>
  // 使用样式，这里将不需要单个页面导入了，直接使用即可
  .content {
    margin-top: 50px;
    color: @dzm-color;
  }
  </style>