jbrieske jbrieske - 3 months ago 69
Sass (Sass) Question

How can I get valid css from sass-loader with current webpack configuration?

I am about to create a pattern library for my company. I am using the following software:


  • css-loader@0.23.1

  • extract-text-webpack-plugin@1.0.1

  • node-sass@3.8.0

  • sass-loader@4.0.0

  • style-loader@0.13.1

  • webpack@1.13.2

  • resolve-url-loader@1.6.0

  • node@6.3.1

  • npm@3.10.3



on my computer (Windows 10).

My goal is to use the
@import "colors"
statement and to get corresponding file
../patterns/globals/_colors.css
. I created a repository to show you my situation in simplified code: https://github.com/jbrieske/webpack-sass-fail. I tried the
includePaths
configuration of the sass-loader and the resolve-url-loader with the property
root
. But neither is working so far...

In my first run (Commit: 14622da5e6eb77ec51644601b94942c3b51eb76a) with sass-loader and includePaths I got the following error report:

Hash: 396f0bfb9d565b6f60f0
Version: webpack 1.13.2
Time: 522ms
+ 1 hidden modules

ERROR in ./styles.scss
Module build failed: ModuleNotFoundError: Module not found: Error: Cannot resolve 'file' or 'directory' ./colors in ~/projects/webpack-sass-fail/app
at ~/projects/webpack-sass-fail/app/node_modules/webpack/lib/Compilation.js:229:38
at onDoneResolving (~/projects/webpack-sass-fail/app/node_modules/webpack/lib/NormalModuleFactory.js:29:20)
at ~/projects/webpack-sass-fail/app/node_modules/webpack/lib/NormalModuleFactory.js:85:20
at ~/projects/webpack-sass-fail/app/node_modules/async/lib/async.js:726:13
at ~/projects/webpack-sass-fail/app/node_modules/async/lib/async.js:52:16
at done (~/projects/webpack-sass-fail/app/node_modules/async/lib/async.js:241:17)
at ~/projects/webpack-sass-fail/app/node_modules/async/lib/async.js:44:16
at ~/projects/webpack-sass-fail/app/node_modules/async/lib/async.js:723:17
at ~/projects/webpack-sass-fail/app/node_modules/async/lib/async.js:167:37
at ~/projects/webpack-sass-fail/app/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:24:19
at onResolved (~/projects/webpack-sass-fail/app/node_modules/enhanced-resolve/lib/Resolver.js:38:18)
at ~/projects/webpack-sass-fail/app/node_modules/enhanced-resolve/lib/Resolver.js:127:10
at ~/projects/webpack-sass-fail/app/node_modules/enhanced-resolve/lib/Resolver.js:191:15
at applyPluginsParallelBailResult.createInnerCallback.log (~/projects/webpack-sass-fail/app/node_modules/enhanced-resolve/lib/Resolver.js:110:4)
at loggingCallbackWrapper (~/projects/webpack-sass-fail/app/node_modules/enhanced-resolve/lib/createInnerCallback.js:21:19)
at ~/projects/webpack-sass-fail/app/node_modules/tapable/lib/Tapable.js:134:6
at Tapable.<anonymous> (~/projects/webpack-sass-fail/app/node_modules/enhanced-resolve/lib/DirectoryDescriptionFilePlugin.js:24:12)
at Storage.finished (~/projects/webpack-sass-fail/app/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
at ReadFileContext.callback (~/projects/webpack-sass-fail/app/node_modules/graceful-fs/graceful-fs.js:78:16)
at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:365:13)
Child extract-text-webpack-plugin:
+ 2 hidden modules

ERROR in ./~/css-loader!./styles.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ./colors in ~\projects\webpack-sass-fail\app
@ ./~/css-loader!./styles.scss 3:10-66

ERROR in ./~/css-loader!./styles.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ./typography in ~\projects\webpack-sass-fail\app
@ ./~/css-loader!./styles.scss 4:10-70


After my second run (Commit: 3dfb374d7a548169d4d1d890b27895a0f8d18a21) with resolve-url-loader I got another error report:

Hash: 0f2ad6d2bedd426d776a
Version: webpack 1.13.2
Time: 605ms
Asset Size Chunks Chunk Names
bundle.js 1.42 kB 0 [emitted] app
[0] ./client.js 27 bytes {0} [built]
+ 1 hidden modules

ERROR in ./styles.scss
Module build failed: ModuleBuildError: Module build failed: CssSyntaxError: css-loader!~/projects/webpack-sass-fail/patterns/globals/colors.scss:14:9: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser
at Input.error (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/input.js:120:22)
at Parser.unknownWord (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/parser.js:457:26)
at Parser.word (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/parser.js:174:14)
at Parser.loop (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/parser.js:60:26)
at parse (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/parse.js:26:16)
at new LazyResult (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/lazy-result.js:80:24)
at Processor.process (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/processor.js:200:12)
at processCss (~/projects/webpack-sass-fail/app/node_modules/css-loader/lib/processCss.js:188:11)
at Object.module.exports (~/projects/webpack-sass-fail/app/node_modules/css-loader/lib/loader.js:24:2)
at DependenciesBlock.onModuleBuildFailed (~/projects/webpack-sass-fail/app/node_modules/webpack-core/lib/NormalModuleMixin.js:315:19)
at nextLoader (~/projects/webpack-sass-fail/app/node_modules/webpack-core/lib/NormalModuleMixin.js:270:31)
at ~/projects/webpack-sass-fail/app/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
at context.callback (~/projects/webpack-sass-fail/app/node_modules/webpack-core/lib/NormalModuleMixin.js:148:14)
at Object.<anonymous> (~/projects/webpack-sass-fail/app/node_modules/css-loader/lib/loader.js:32:18)
at ~/projects/webpack-sass-fail/app/node_modules/css-loader/lib/processCss.js:211:3
at runMicrotasksCallback (internal/process/next_tick.js:58:5)
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
Child extract-text-webpack-plugin:
+ 4 hidden modules

ERROR in ./~/css-loader!../patterns/globals/colors.scss
Module build failed: CssSyntaxError: css-loader!~/projects/webpack-sass-fail/patterns/globals/colors.scss:14:9: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser
at Input.error (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/input.js:120:22)
at Parser.unknownWord (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/parser.js:457:26)
at Parser.word (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/parser.js:174:14)
at Parser.loop (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/parser.js:60:26)
at parse (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/parse.js:26:16)
at new LazyResult (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/lazy-result.js:80:24)
at Processor.process (~/projects/webpack-sass-fail/app/node_modules/postcss/lib/processor.js:200:12)
at processCss (~/projects/webpack-sass-fail/app/node_modules/css-loader/lib/processCss.js:188:11)
at Object.module.exports (~/projects/webpack-sass-fail/app/node_modules/css-loader/lib/loader.js:24:2)
@ ./~/css-loader!./styles.scss 3:10-89

ERROR in ./~/css-loader!../patterns/globals/typography.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ./colors in ~/projects/webpack-sass-fail/patterns/globals
@ ./~/css-loader!../patterns/globals/typography.scss 3:10-76


I I try to compile a simle sass with the following content:

$grey: lightgrey;
$family: "Tahoma";

body {
font-size: 12px;
}

p {
border: 1px solid $grey;
font-family: $family;
}


with the mentioned webpack configuration I receive no error message but invalid CSS code like this one:

$family: "Tahoma";
$grey: lightgrey;

body {
font-size: 12px;
}

p {
border: 1px solid $grey;
font-family: $family;
}


I don't understand where is the source for my fail.

Best regards,
JBrieske

Answer

Module build failed: ModuleNotFoundError: Module not found: Error: Cannot resolve 'file' or 'directory' ./colors in ~/projects/webpack-sass-fail/app

Rename color to color.scss in typography.scss. Or setup resolve in webpack config properly.

You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

Change loader in ExtractTextPlugin this way:

{test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css!resolve-url!sass')}
// or
{ test: /\.scss$/, loader: ExtractTextPlugin.extract('style', ['css', 'resolve-url', 'sass']) }

Because this is equivalent:

{test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css')}
{test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css', 'resolve-url', 'sass')}

Than you get new error:

Undefined variable: "$grey".

This is just misspelling in styles.scss:

// border: 1px solid $grey;
border: 1px solid $gray;