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

10,558

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")
  ]
Share:
10,558
ex-zac-tly
Author by

ex-zac-tly

about me

Updated on June 13, 2022

Comments

  • ex-zac-tly
    ex-zac-tly almost 2 years

    I currently have some react components & sass that are being built with webpack successfully. I also have a main sass file that builds to css with a gulp task.

    I'd like to only have to use one of these technologies, is it possible to just compile sass to css without an associated require to the sass in an entry file?

    Here's an example trying to use WebpackExtractTextPlugin

    webpack.config.js

    entry_object[build_css + "style.css"] = 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]")
      ]
    

    after running webpack, the style.css asset looks like this:

    /******/ (function(modules) { // webpackBootstrap
    /******/    // The module cache
    /******/    var installedModules = {};
    /******/
    /******/    // The require function
    /******/    function __webpack_require__(moduleId) {
    
    ...