How to Build SASS/Less/CSS in Webpack Without Requiring Them in My Js

Can I build sass/less/css in webpack without requiring them in my JS?

I solved this with the help of @bebraw

As he stated in his comment, webpack will create a dummy javascript file as followed by the pattern in your output.filename when using ExtractTextPlugin. Because I was setting the output file of the ExtractTextPlugin to exactly the same as the name in the output.filename, it was only outputting the javascript file. By ensuring that the name of the output.filename and ExtractTextPlugin output filename are different, I was able to load my sass to css beautifully.

Here's the final example of the webpack.config.js

entry_object[build_css + "style"] = static_scss + "style.scss";
module.exports = {
  entry: entry_object,
  output: {
    path: './',
    filename: '[name]'
  },
{
  test: /\.scss$/,
  include: /.scss$/,
  loader: ExtractTextPlugin.extract("style-loader", "css!sass")
}
  plugins: [
    new ExtractTextPlugin("[name].css")
  ]

Webpack run both .LESS and .SCSS compilation. Extract text plugin not working on one bundle file

Yes, your direction is right. You can use extract-text-webpack-plugin for this one.
Just define an extractor for each file in resulting bundle and use it in module.rules for a desired rule.

Below is an example of usage of 3 of these extractors for css/scss/less files. One per each file.

(Was created and tested on webpack 4.x)

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

// Create extract plugin for each file you want to create in resulting bundle
const extractCSS = new ExtractTextPlugin('output-folder/or/whatever/from-css.css');
const extractLESS = new ExtractTextPlugin('output-folder/or/whatever/from-less.css');
const extractSCSS = new ExtractTextPlugin('output-folder/or/whatever/from-scss.css');

module: {
  rules: [
      // ...
      {
        test: /\.less$/,
        use: extractLESS.extract({
          fallback: 'style-loader',
          use: [
            { loader: 'css-loader', options: { importLoaders: 1 } }, // importLoaders equals to number of loaders in array after this one.
            'less-loader'
          ]
        })
      },
      {
        test: /\.scss$/,
        use: extractSCSS.extract({
          fallback: 'style-loader',
          use: [
            { loader: 'css-loader', options: { importLoaders: 1, url: false } }, // importLoaders equals to number of loaders in array after this one.
            'sass-loader'
          ]
        })
      },
      {
        test: /\.css$/,
        use: extractCSS.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      }
  ],
  plugins: [
    // Include each of "extractors" here. Order is not important
    extractLESS,
    extractSCSS,
    extractCSS,
    // ...
  ]
}

I didn't actually run this example, just took it from my project and updated it to fit your question.
So, feel free to leave a comment with a question if something is not working as expected. I'll update my response.

Can Webpack build PostCSS without a JavaScript file?

You can implement simple workaround by using file-loader:

entry: {
    bootstrap: 'file?name=[name].[ext]!pcss/base/styles.pcss'
}

In this case your file will be saved separately from the entry point.

---

Related Topics