vue工程如何为组件自动注入全局样式文件

<script lang="less">
@import "../styles/variables";
@import "../styles/mixins";
@import "../styles/functions";

// 其他样式
</script>

// entry.less

@import './variables';
@import './mixins';
@import './functions';

<script lang="less">
@import "../styles/entry";

// 其他样式
</script>

$ npm i -D style-resources-loader

// vue.config.js
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)))  // A
  },
}

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

patterns: [
  path.resolve(__dirname, './src/styles/entry1.less'),
  path.resolve(__dirname, './src/styles/entry2.less'),
],

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/entry.scss";`  // A
      }
    }
  }
}

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `
            @import "@/styles/entry1.scss";
            @import "@/styles/entry2.scss";
        `
      }
    }
  }
}

// Less
$ npm i -D less less-loader

// Sass/Scss
$ npm i -D node-sass sass-loader

// Stylus
$ npm i -D stylus stylus-loader