前言

不得不說，css-process的功能很強(qiáng)大柠座，極大的方便了前端編寫樣式邑雅，提供了變量定義、可嵌套的選擇器妈经、mixins混合書寫淮野、函數(shù)定義等諸多便捷的能力。

我們在開發(fā)中經(jīng)常遇到在組件中使用公共文件樣式的情況吹泡，這時候就需要用到全局配置骤星，而非在每一個組件都單獨(dú)引用，太繁瑣爆哑，不易維護(hù)

所以如何能全局配置變得很重要

全局配置

一般的css公共文件可以在項(xiàng)目入口文件中 import 引入洞难，遇到以變量定義的樣式文件時，就需要修改配置文件了（下面列兩種寫法）

less

在./build/utils.js的exports.cssLoaders中添加lessResourceLoader

function lessResourceLoader() {
    var loaders = [
      cssLoader,
      'less-loader',
      {
        loader: 'sass-resources-loader',
        options: {
          resources: [
            path.resolve(__dirname, '../src/style/common.less'),
          ]
        }
      }
    ];
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
}
return {   
        css: generateLoaders(),   
        postcss: generateLoaders(),   
        less: lessResourceLoader(),   
        sass: generateLoaders('sass', { indentedSyntax: true }),   
        scss: generateLoaders('sass'),   
        stylus: generateLoaders('stylus'),   
        styl: generateLoaders('stylus') 
}

在cssLoaders函數(shù)的返回中將less: generateLoaders('less')改為第二步添加的方法less: lessResourceLoader()

stylus

在./build/utils.js的exports.cssLoaders中添加stylusOptions

const stylusOptions = {  
   import: [     
       path.join(__dirname, "../src/assets/css/variables.styl")   ],   
       paths: [     path.join(__dirname, '../src/assets'),             
       path.join(__dirname, '../')   
   ] 
}
return {   
       css: generateLoaders(),   
       postcss: generateLoaders(),   
       less: generateLoaders('less'),   
       sass: generateLoaders('sass', { indentedSyntax: true }),   
       scss: generateLoaders('sass'),   
       stylus: generateLoaders('stylus', stylusOptions),   
       styl: generateLoaders('stylus', stylusOptions) 
}

在cssLoaders函數(shù)的返回中將stylus: generateLoaders('stylus')增加配置stylusOptions

scss

npm install sass-resources-loader --save-dev

return {   
    css: generateLoaders(),   
    postcss: generateLoaders(),   
    less: generateLoaders('less'),   
    sass: generateLoaders('sass', { indentedSyntax: true }),   
    scss: generateLoaders('sass').concat(
    {
        loader: 'sass-resources-loader',
        options: {
           resources: path.resolve(__dirname, '../src/style/blog.scss')
        }
    }),   
    stylus: generateLoaders('stylus', stylusOptions),   
    styl: generateLoaders('stylus', stylusOptions) 
}

文件已經(jīng)導(dǎo)入成功了. 還有最后一步, 重啟服務(wù), npm run dev. (更改了utils,要重啟服務(wù),否則會報錯)