Webpack:为每个主题生成单独的样式表

时间:2016-06-19 02:53:35

标签: webpack production stylus webpack-style-loader css-loader

我正在使用CSS模块有条件地加载顶级样式表(手写笔)。 这在我运行webpack-dev-server时工作正常,但我正在尝试生成2个CSS文件:theme1.css和theme2.css。

以下是顶级 index.js 文件。

export function loadStylesheet() {
  if (condition1) {
    require('../../styles/theme1.styl');
  } else {
    require('../../styles/theme2.styl');
  }
}

的WebPack 这是webpack.config.prod.js

// ...
module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: [
        /node_modules/,
        /src\/lib/
      ],
      loaders: ['babel', 'eslint-loader']
    },
    {
      test: /\.html$/,
      loader: 'file?name=[name].[ext]'
    },
    {
      test: /\.styl$/,
      include: path.join(__dirname, 'src', 'styles'),
      loader: ExtractTextPlugin.extract('style', '!css?-url!postcss!stylus')
    },
    {
      test: /\.jpg|.png|.gif|.otf$/,
      loader: 'file?name=[path][name].[ext]'
    }
  ]
},
plugins: [
  // ...
  new ExtractTextPlugin('css/style.css', { allChunks: true })
]
// ...

0 个答案:

没有答案