30

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

...
ex-zac-tly
  • 979
  • 1
  • 8
  • 24
  • 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 Apr 21 '16 at 21:16
  • 1
    Is this a limitation of some kind? I usually have some index file that imports all my style related stuff. – azium Apr 21 '16 at 21:21
  • 2
    Looks like this is what you're looking for though https://github.com/peerigon/extract-loader#examples – azium Apr 21 '16 at 21:23
  • @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 Apr 21 '16 at 21:27
  • @ex-zac-tly Have you tried defining a separate entry for your sass/less/css? You can use an entry in combination with `ExtractTextPlugin` to generate a single bundle out of those. What sort of output do you want exactly? Single CSS bundle or something else? – Juho Vepsäläinen Apr 22 '16 at 05:51
  • @bebraw just a single .css file. basically i'm refactoring our build process from gulp to webpack, and gulp is taking style.scss -> style.css which is imported in my html – ex-zac-tly Apr 23 '16 at 20:15
  • I just updated the question with code snippits using ExtractWebPlugin – ex-zac-tly Apr 23 '16 at 20:31
  • 1
    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](https://github.com/webpack/webpack/issues/1967)). 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 Apr 24 '16 at 04:32

1 Answers1

7

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")
  ]
ex-zac-tly
  • 979
  • 1
  • 8
  • 24