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

Answer 1

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