kef-builder-buffet/webpack/cfg/style.js

buffet-builder构建工具

/**
 * css样式
 */

'use strict';

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
const cssnext = require('postcss-cssnext');
const cssnano = require('cssnano');
const pxtorem = require('postcss-pxtorem');
const postcssImport = require('postcss-import');

module.exports = function (config, argv) {
  config.module = config.module || {};
  config.module.rules = config.module.rules || [];

  // 输出css文件
  let extractStylePlugin = new ExtractTextPlugin({
    filename: '[name].css',
    disable: false
  });

  // scss-loader
  let scssModuleRule = {
    test: /\.(scss|css)$/,
    use: extractStylePlugin.extract({
      use: [{
          loader: 'css-loader'
        },
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: [
              pxtorem(),
              autoprefixer({
                remove: false,
                browsers: ['ios >= 7', 'Android >= 4']
              })
            ]
          }
        },
        {
          loader: 'sass-loader'
        }
      ],
      fallback: 'style-loader'
    })
  };

  // postcss-loader
  let pcssModuleRule = {
    test: /\.(pcss)$/,
    use: extractStylePlugin.extract({
      use: [{
          loader: 'css-loader'
        },
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: [
              postcssImport(),
              cssnext({
                warnForDuplicates: false
              }),
              autoprefixer({
                remove: false,
                browsers: ['ios >= 7', 'Android >= 4']
              }),
              pxtorem(),
              cssnano({
                preset: 'default'
              })
            ]
          }
        }
      ],
      fallback: 'style-loader'
    })
  };

  // less-loader
  let lessModuleRule = {
    test: /\.(css|less)$/,
    use: extractStylePlugin.extract({
      use: ['css-loader', 'less-loader'],
      fallback: 'style-loader',
    })
  }
  

  config.module.rules.push(scssModuleRule);
  config.module.rules.push(pcssModuleRule);
  config.module.rules.push(lessModuleRule);

  config.plugins = config.plugins || [];
  config.plugins.push(extractStylePlugin);
};