Extracting results from scss files?

[mjc-gh]

How would I use this to extract the results from packed scss files?

[e-cloud]

same issue:

For my case, I require app.scss in app.js, and import angular-toastr.css in app.scss. And then, here is what happened.

ERROR in ./app/app.scss
Module build failed: ReferenceError: require is not defined
    at -!./../../node_modules/css-loader/index.js?sourceMap!../../bower_components/angular-toastr/dist/angular-toastr.css:1:28
    at ContextifyScript.Script.runInNewContext (vm.js:18:15)
    at runModule (/home/scott/github/clab/node_modules/extract-loader/lib/extractLoader.js:139:12)
    at /home/scott/github/clab/node_modules/extract-loader/lib/extractLoader.js:89:20
    at Array.map (native)
    at /home/scott/github/clab/node_modules/extract-loader/lib/extractLoader.js:86:24
 @ ./app/app.js 26:0-21

[lennerd]

@e-cloud Did you found a solution for this?

[leonid-bauxy]

try to prefix your @import path with ~. Helped me.

Example:

Before:

@import 'normalize.css';

After:

@import '~normalize.css';

[antarasi]

You can just append mainCss var with "sass-loader" right after "css-loader". For example:

mainCss = ["style-loader", "css-loader", "sass-loader", path.join(__dirname, "src/sass", "styles.scss")]

and it works out of the box (and HMR as well). Remember to change extention from file-loader?name=[name].[ext] to file-loader?name=[name].css and install sass-loader (npm install --save-dev sass-loader).

[jods4]

@antarasi The problem is not in loading styles.scss.
I have a similar setup with LESS.
As soon as my main LESS file does one @import "x.css", the second file is correctly found but I get the same ReferenceError: require is not defined as @e-cloud (same stack).

can extraact-loader only be used with single files (no dependencies, no @import)?

[antarasi]

@jods4 I don't know if extract-loader can be used with single files only. Here you can find my setup, maybe you will find it usefull. Basically I am creating here another entry file that is used in html file:

// PREPARE LOADER
if (isProduction) {
  sassLoaders = [
    "file-loader?name=[name].css",
    "extract-loader",
    "css-loader?" + JSON.stringify({discardComments: {removeAll: true}}),
    "sass-loader"
  ];
} else {
  sassLoaders = [
    "style-loader",
    "css-loader",
    "sass-loader"
  ]
}

  // ADD ENTRY POINT (styles.scss)
entry: [
    './src/main.js',
    './src/sass/styles.scss'
  ],

// USE LOADER
      {
        test: /styles\.scss$/,
        loader: sassLoaders.join("!"),
      },

// USE RESULT IN HTML
<link rel="stylesheet" href="/dist/styles.css">

[jods4]

That setup works for me... as long as you don't have @import in your scss.... do you?

[antarasi]

@jods4 No, I do have imports. The only problem I've seen is that
all paths used in imported from subfolders scss files (for background images, fonts etc) are relative to main styles.scss.

For example in /src/sass/partial/buttons.scss i have to use paths relative to /src/sass/, not /src/sass/partial when buttons.scss is imported in /src/sass/styles.scss. This causes some IDEs to not recognize this paths.

HMR is also working with this config.

[jods4]

Yeah, I don't have problems with the resolving the imports (putting a wrong path show that it's a different error).

It's something different, as indicated in this comment.

[antarasi]

@jods4 Isn't this caused by importing scss files from node_modules or bower_components directory? I am using absolute path to make it work, for instance:
@import "/node_modules/simplebar/umd/simplebar.css";
@import "~simplebar/umd/simplebar.css"; was not working.

[jods4]

maybe? That would be interesting to try.
But at this point I have switched to ExtractTextPlugin, I needed something that works ;)

[andersk]

The problem seems to be @import, not SCSS. Minimal test case without SCSS:

webpack.config.js

module.exports = {
    entry: './entry.js',
    output: {filename: 'output.js'}
};

entry.js

require('file-loader!extract-loader!css-loader!./foo.css');

foo.css

@import url(bar.css);

bar.css

body { background: green; }

Result

$ npm install webpack file-loader extract-loader css-loader
$ node_modules/.bin/webpack
Hash: dc44965802b7cc66ed33
Version: webpack 3.6.0
Time: 285ms
    Asset     Size  Chunks             Chunk Names
output.js  3.33 kB       0  [emitted]  main
   [0] ./entry.js 60 bytes {0} [built]
   [1] ./node_modules/file-loader!./node_modules/extract-loader/lib/extractLoader.js!./node_modules/css-loader!./foo.css 752 bytes {0} [built] [failed] [1 error]
   [2] ./node_modules/css-loader!./bar.css 191 bytes [built]

ERROR in ./node_modules/file-loader!./node_modules/extract-loader/lib/extractLoader.js!./node_modules/css-loader!./foo.css
Module build failed: -!./node_modules/css-loader/index.js!./bar.css:1
exports = module.exports = require("./node_modules/css-loader/lib/css-base.js")(undefined);
^

ReferenceError: require is not defined
    at -!./node_modules/css-loader/index.js!./bar.css:1:1
    at ContextifyScript.Script.runInContext (vm.js:53:29)
    at ContextifyScript.Script.runInNewContext (vm.js:59:15)
    at runModule (/tmp/z/node_modules/extract-loader/lib/extractLoader.js:144:12)
    at /tmp/z/node_modules/extract-loader/lib/extractLoader.js:94:20
    at Array.map (<anonymous>)
    at /tmp/z/node_modules/extract-loader/lib/extractLoader.js:91:24
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
 @ ./entry.js 1:0-58

[jezeniel]

@andersk's example is what i am experiencing, using @import "foo.css"; returns the same error

[gutnikov]

From extractLoader.js:

`/**

• Executes the given CommonJS module in a fake context to get the exported string. The given module is expected to
• just return a string without requiring further modules.
• @throws Error
• @param {string} src
• @param {string} filename
• @param {string} [publicPath]
• @returns {string}
  */
  function runModule(src, filename) {
  `

Imports are not supported, unfortunately

[benlind]

I'm getting the same "ReferenceError: require is not defined" error when importing a css file from an scss file. Are there any workarounds for this?

[jhnns]

Has been fixed with v3.0.0 🚀