Question

我需要从两个不同的scss条目文件生成两个css文件。在下面的代码中我提到了两个入口点。第一个包含我所有的自定义scss文件导入，第二个包含所有自定义bootstrap导入。

所以，我的要求是生成两个单独的css文件，如... app.css和bootstrap.css

entry: ["./styles/app.scss", './styles/custom-bootstrap.scss'],
rules: {
  test: /\.(sass|scss)$/,
  use: ExtractTextPlugin.extract(['css-loader', 'sass-loader']),
  include: PATHS.app
},
plugin: {
  new webpack.EnvironmentPlugin(['NODE_ENV']),
  new webpack.DefinePlugin(compileTimeConstantForMinification),
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NoEmitOnErrorsPlugin(),
  new ExtractTextPlugin('./styles/app.css'),
  new ExtractTextPlugin('.

Answer 1

要生成2个不同的.css文件，您只需要使用变量[name]的插件部分中的2个入口点和1个ExtractTextPlugin实例：

entry: {
  app: './styles/app.scss',
  bootstrap: './styles/custom-bootstrap.scss'
},
rules: {
  test: /.(sass|scss)$/,
  use: ExtractTextPlugin.extract({
    use: ['css-loader', 'sass-loader']
  }),
  include: PATHS.app
},
plugin: {
  new ExtractTextPlugin({
    filename: '[name].css' //generates "app.css" and "bootstrap.css" files
  })
}

Webpack从两个入口点生成两个css文件

1 个答案: