Extract SCSS

Hi,

I know that we can use the ExtractTextPlugin to extract the CSS to a different file, however, would there be anyway to extract the uncompiled SCSS to another file?

I am using SCSS variables to change the theme in my application, and having to compile with webpack takes much longer than a simple SASS compilation would, so I was wondering if there would be a way to simply extract it.

Thanks.

[bpevs]

Heyhey I know this is old-ish, but I was just playing with this recently, thought I should chime in, to help anyone else that runs into this issue.

I ran into this problem while making a library, where I wanted a user to be able to import either the .css file OR the .scss file (in case the user wants to use my mixins, etc). So I think what @tuvistavie was looking to do is have a resulting .js file, .css file, and .scss file as his output.

I think @tuvistavie is just using the wrong tool for the job. What he really wants is something that will just follow the imports and append everything together without touching anything else. I use postcss and postcss-loader with the postcss-scss plugin, so that it can handle the scss. I then extract this separately with multi-loader. This has all my sass variables and things intact.

I didn’t really want to build a loader, and I stumbled upon this slightly hacky solution, so I’m just using that (or look at the full code here):

Example:

var multi = require("multi-loader");
var ExtractTextPlugin = require("extract-text-webpack-plugin");

// We're running two instances of ExtractTextPlugin, one for .css and one for .scss
var cssPlugin  = new ExtractTextPlugin("styles.css",  { allChunks: true });
var scssPlugin = new ExtractTextPlugin("styles.scss", { allChunks: true });

// For .css file, compile the sass with sass-loader
var cssLoader  = cssPlugin.extract("style",  [ "css", "postcss", "sass" ]);

// For .scss, don't.
var scssLoader = scssPlugin.extract("style", [ "css", "postcss" ]);

module.exports = {

  ...

  module: {
    loaders: [
      {
        test: /\.(css|scss)$/,
        loader: multi(cssLoader, scssLoader) // Use both loaders at the same time
      }
    ]
  },
  plugins: [ cssPlugin, scssPlugin ],
  postcss: () => []
}

Dependencies:

"css-loader": "^0.25.*",
"extract-text-webpack-plugin": "^1.0.1",
"multi-loader": "^0.1.0",
"node-sass": "^3.10.1",
"postcss": "^5.2.5",
"postcss-loader": "^1.0.0",
"postcss-scss": "^0.3.1",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1",
"webpack": "^1.13.2",

I guess it seems like a lot of things to get this to work, but I was already using postcss, so worked for me. Hope it helps! And yey sass-loader. ❤️

[danhper]

@ivebencrazy That’s exactly what I was looking for, thanks! 😄