vue工程爲組件自動注入全局樣式文件

開發過程中，隨着工程變大，不免要提取出一些公共的樣式，如variables、mixins、functions等幾乎在所有業務組件中都會用到的樣式：

-- src
---- styles
-------- variables.less
-------- mixins.less
-------- functions.less

如果每個需要的組件都要手動導入一次，就太繁瑣了：

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

// 其他樣式
</script>

當然最直接的改進方案是創建一個包含上面引入的入口樣式文件entry.less，然後在各組件中導入即可：

// entry.less

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

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

// 其他樣式
</script>

但是手動導入畢竟繁瑣，若能夠自動導入就大善了，所幸配置自動導入也不繁瑣，下面以常用的Less、Stylus、Sass/Scss等預處理器爲例說明如何在vue工程中配置自動導入：

Less和Stylus

配置Less和Stylus自動導入有兩種方案：

• 使用style-resources-loader
• 使用vue-cli-plugin-style-resources-loader

這裏我們推薦使用第一種，因爲第二種方案只是對第一種方案的包裝，且暫不支持熱更新。

安裝style-resources-loader

$ npm i -D style-resources-loader

配置vue.config.js

如果工程根目錄下沒有vue.config.js文件，手動創建一下即可，然後插入以下代碼：

// 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
      ],
    })
}

如果想要配置多個導入，只需在B行後繼續添加即可：

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

如果工程使用的是Stylus，則將A行替換爲types.forEach(type => addStyleResource(config.module.rule(‘stylus’).oneOf(type)))，將B行替換爲*path.resolve(__dirname, ‘./src/styles/entry.styl’)*即可。

Sass/Scss

其實Sass/Scss配置自動導入也可以使用上面的方案，但是使用其原生的方案更加便捷，只需在vue.config.js中配置即可：

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

如果想要配置多個導入，只需在A行繼續添加即可：

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

注意：[email protected]之前，要將上面的prependData替換爲data。

擴展

如果在使用vue create創建工程時，沒有選擇Manually select features，或者沒有選擇CSS Pre-processors，則工程內默認使用的是原生CSS，但是vue的默認Webpack配置中已經內置了對CSS Pre-processors的支持，所以只需要安裝響應依賴，然後再工程文件中使用對應語法書寫樣式即可：

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

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

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