vue工程如何為元件自動注入全域性樣式檔案

2022-04-11 13:01:07

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";
        `
      }
    }
  }
}

注意：sass-loader@8.0.0之前，要將上面的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

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。