【转载】Vue 配置全局样式（style-resources-loader）

原文链接跳转有误，待补充

一、简介

• 在样式引入时，对于变量的引入，需要在每个文件里都要引入一遍，为了避免每次使用时都需要单独引入一遍的问题，采用了 style-resources-loader。
• 在确保安装指定 CSS 解析器 插件（less、less-loader | stylus、stylus-loader …）后。
• 这里以 less 举例，新建一个 reset.less (文件名随意)，路径为 @/assets/reset.less。

• 单页面导入示例：

Markup

<style 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

Bash

 npm i style-resources-loader

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

Bash

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

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

JavaScript

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

Bash

$ npm i style-resources-loader

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

JavaScript

const path = require("path");
module.exports = {
  chainWebpack: (config) => {
    const types = ["vue-modules", "vue", "normal-modules", "normal"];
    types.forEach((type) =>
      addStyleResource(config.module.rule("less").oneOf(type))
    );
  },
};

function addStyleResource(rule) {
  rule
    .use("style-resource")
    .loader("style-resources-loader")
    .options({
      patterns: [path.resolve(__dirname, "./src/styles/main.less")],
    });
}

四、上面两种方式选一种

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

Markup

<template>
  <!-- 内容 -->
  <div>DZM - Test</div>
</template>

<script>
export default {
}
</script>

<style scoped>
// 使用样式，这里将不需要单个页面导入了，直接使用即可
.content {
  margin-top: 50px;
  color: @dzm-color;
}
</style>