How to automatically inject global style files into components with vue projects

During the development process, as the project becomes larger, some common styles are inevitably extracted, such as variables, mixins, functions, and other styles that are used in almost all business components:

-- src
---- styles
--------
--------
--------

It would be too cumbersome if each required component needs to be imported manually:

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

// Other styles</script>

Of course, the most direct improvement is to create an entry style file that contains the above introduced entry style file and then import it into each component:

// 

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

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

// Other styles</script>

However, manual import is cumbersome after all, and it would be great if it can be automatically imported. Fortunately, configuration automatic import is not cumbersome. The following is a common preprocessor such as Less, Stylus, Sass/Scss as an example to illustrate how to configure automatic import in a vue project:

Less and Stylus

There are two solutions to configure Less and Stylus to automatically import:

• usestyle-resources-loader
• usevue-cli-plugin-style-resources-loader

Here we recommend using the first one, because the second one is only a packaging for the first one and does not support hot updates for the time being.

Install style-resources-loader

$ npm i -D style-resources-loader

Configuration

If there are no files in the root directory of the project, create them manually and insert the following code:

// 
const path = require('path')

 = {
  chainWebpack: config => {
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    (type => addStyleResource(('less').oneOf(type)))  // A
  },
}

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

If you want to configure multiple imports, just continue adding after line B:

patterns: [
  (__dirname, './src/styles/'),
  (__dirname, './src/styles/'),
],

If the project is using Stylus, replace line A with (type => addStyleResource(('stylus').oneOf(type))) and replace line B with *(__dirname, './src/styles/')*.

Sass/Scss

In fact, the above solution can be used to automatically import Sass/Scss configuration, but it is more convenient to use its native solution. Just configure it in:

// 
 = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/";`  // A
      }
    }
  }
}

If you want to configure multiple imports, just continue adding on line A:

// 
 = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `
            @import "@/styles/";
            @import "@/styles/";
        `
      }
    }
  }
}

Note: Before [email protected], replace the above prependData with data.

Extended

If you do not select Manually select features or CSS Pre-processors are not selected when creating a project using vue create, then the project uses native CSS by default, but the default Webpack configuration of vue already has built-in support for CSS Pre-processors, so you only need to install the response dependencies and then use the corresponding syntax writing style in the project file:

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

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

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

The above is personal experience. I hope you can give you a reference and I hope you can support me more.