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

Question

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

...

You are going to need webpack or gulp to transpile sass to css, one of the mis enough, is that what you are asking? — QoP
Is this a limitation of some kind? I usually have some index file that imports all my style related stuff. — azium
Looks like this is what you're looking for though github.com/peerigon/extract-loader#examples — azium
@azium I have been messing around with different configs, are you suggesting that I have a js file that imports the scss, build that, and include it in a script tag? I will also look into the extract-loader, thank you. — ex-zac-tly
Cool, I understand better what's going on now. When you use a SCSS file as an entry, it will generate a dummy JavaScript file like that (related issue). The portion that actually generates the CSS file you expect is new ExtractTextPlugin("[name]"). Could you try changing that to form new ExtractTextPlugin("[name].css")? — Juho Vepsäläinen

ex-zac-tly ex-zac-tly · Accepted Answer · 2016-04-24T16:55:24

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")
  ]

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

1 Answers