How to output multiple CSS files from single JS file in Webpack 4?

Question

In my js file 'example.js' I want to import two .scss files 'example.scss' and 'example.m.scss' for desktop and mobile version of website respectively. So I need three outputs - example.js, example.scss and example.m.scss. How I can achieve it in Webpack 4?

JS file:

// CSS
import '../../css/example.scss';
import '../../css/mobile/example.m.scss';

My current Webpack config:

const path = require('path');
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: {
        home: './src/AppBundle/Resources/public/js/main_home/main_home.js',
       // ...
    },

    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'web/assets'),
    },

    module: {
        rules: [
            {
                test: /\.scss|.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader", // translates CSS into CommonJS
                    "sass-loader" // compiles Sass to CSS, using Node Sass by default
                ]
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: ['file-loader'],
            },
            {
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: [{
                    loader: 'file-loader'
                }]
            }
        ]
    },

    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
        }),
        
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            'window.$': 'jquery',
            'window.jQuery': 'jquery'
        })
    ]
};

@MuhammadMabrouk No, I decided put mobile and desktop css to one file. For performance reason maybe not good, but what to do... — Molarro
– Molarro, Commented Jul 13, 2021 at 11:20

Faig · Accepted Answer · 2021-11-10 08:16:41Z

I'm not sure if it works for .scss files as well but according to this resource you could do the following with .css files (however they state that webpack is no the best tool for that):

The best way to merge CSS files into one independent CSS file is to use extract-text-webpack-plugin.

npm install --save-dev extract-text-webpack-plugin

Edit webpack.config.js to include setup the plugin.

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: {
    'bundle.min.css': [
      path.resolve(__dirname, 'src/css/main.css'),
      path.resolve(__dirname, 'src/css/local.css')
    ],
    'bundle.js': [
      path.resolve(__dirname, 'src/index.js')
    ]
  },
  output: {
    filename: '[name]',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin("bundle.min.css"),
  ]
};

The generated dist/bundle.min.css is pure css file combining src/css/main.css and src/css/local.css.

# npm run build
./node_modules/.bin/webpack
# build for production (with minified)
./node_modules/.bin/webpack -p

NOTE: If you follow the link above you can find the steps for Lass and Less files as well.

Collectives™ on Stack Overflow

How to output multiple CSS files from single JS file in Webpack 4?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related