stylus，less的全局配置

前言

不得不说，css-process的功能很强大，极大的方便了前端编写样式，提供了变量定义、可嵌套的选择器、mixins混合书写、函数定义等诸多便捷的能力。

我们在开发中经常遇到在组件中使用公共文件样式的情况，这时候就需要用到全局配置，而非在每一个组件都单独引用，太繁琐，不易维护

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

全局配置

一般的css公共文件可以在项目入口文件中 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函数的返回中将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函数的返回中将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) 
}

文件已经导入成功了. 还有最后一步, 重启服务, npm run dev. (更改了utils,要重启服务,否则会报错)