How to generate side css with Webpack?

Asked Mar 19 '19 at 13:12

Active Mar 19 '19 at 13:12

Viewed 140 times

I have a Laravel Application with a webpack.config.js quite similar to this one:

const path = require('path')

module.exports = {
  entry: { app: ['./app/Http/app.js'] },
  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'public/'),
    filename: 'assets/js/[name].js',
    publicPath: '/'
  },
  plugins: [],
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.(sass|scss)$/, use: ['style-loader', 'css-loader', 'sass-loader']},
      ...
    ]
  }
}

This config will generate a bundle javascript app.js which is good for my frontend. However I would like generate another bundle from sass files:

Input:

app/assets/sass/print.sass

Output:

public/css/print.css

What should I change on my Webpack config to do this additional side generation?

asked Mar 19 '19 at 13:12

nowox

25,978
39
143
293

https://stackoverflow.com/questions/50394789/webpack-4-compile-scss-to-separate-css-file – Vadim Hulevich Mar 19 '19 at 13:15
@VadimHulevich Not really an answer. `MiniCssExtractPlugin` does not seem to go along with `style-loader` and it is not possible to generate a side css. – nowox Mar 19 '19 at 14:20
@nowox, I thing you also need to create list of entry point for each bundle AFAIK – Sandeep Saroha Mar 19 '19 at 14:34
Have you fixed the issue? – Afshin Jul 15 '20 at 08:48

How to generate side css with Webpack?

0 Answers0