CODEWITHSUNDEEP
csswebpacksass
Abhishek Jain
Abhishek Jain

Reputation: 285

Webpack Generate two css files from two entry points

I need to generate two css files from two different scss entry files. In the below code I have mentioned two entry points.first one contains all my custom scss file imports and the second one contains all custom bootstrap imports.

So, my requirement is to generate two separate css files like...app.css and 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('.

Upvotes: 1

Views: 655

Answers (1)

hackerrdave
hackerrdave

Reputation: 6706

To generate 2 different .css files, you just need 2 entry points, and 1 ExtractTextPlugin instance in the plugins section that uses a variable [name]:

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
  })
}

Upvotes: 2

Related Questions