Open theCrius opened 6 years ago
I used the index.scss in /src importing other scss from ../node_modules/ without issue but today had to write some custom scss myself.
/src
../node_modules/
Apparently, no matter how simple I write it, i get and error about the symbol $ not being recognized.
$
[...] [12:48:52] Starting 'serve'... [12:48:52] Starting 'webpack:watch'... [12:48:58] Time: 5497ms Asset Size Chunks Chunk Names index.js 3.63 MB 0 main index.js.map 4.34 MB 0 main ERROR in ./~/css-loader?importLoaders=1!./~/sass-loader/lib/loader.js!./~/postcss-loader!./src/index.scss Module build failed: Unknown word (20:11) 18 | @each $side in $sides { 19 | @if $side == '' { > 20 | .m#{$space} { | ^ 21 | margin: #{$space}px; 22 | } @ ./src/index.scss 4:14-173 @ ./src/index.js Child html-webpack-plugin for "index.html": Asset Size Chunks Chunk Names index.html 3.14 kB 0 [12:48:58] Finished 'webpack:watch' after 5.59 s [...]
Copy the content from .yo-rc.json:
.yo-rc.json
{ "generator-fountain-angular1": { "version": "1.0.0", "props": { "framework": "angular1", "modules": "webpack", "js": "babel", "ci": "", "css": "scss", "resolved": "C:\\Users\\[myusername]\\AppData\\Roaming\\npm\\node_modules\\generator-fountain-webapp\\node_modules\\generator-fountain-angular1\\generators\\app\\index.js", "namespace": "fountain-angular1:app", "_": [], "sample": "todoMVC", "router": "uirouter" } } }
I don't have relevant links but I've a fix. In the ./conf/webpack.conf.js, this section:
./conf/webpack.conf.js
{ test: /\.(css|scss)$/, loaders: [ 'style-loader', 'css-loader', 'sass-loader', 'postcss-loader' ] },
The order is wrong. It should be:
{ test: /\.(css|scss)$/, loaders: [ 'style-loader', 'css-loader', 'postcss-loader', 'sass-loader' ] },
Tell us which operating system you are using, as well as which versions of Node.js, npm, and yo. Run the following to get it quickly:
Node.js v9.3.0 win32 6.1.7601 yo 2.0.0 npm 5.6.0
Description
I used the index.scss in
/src
importing other scss from../node_modules/
without issue but today had to write some custom scss myself.Apparently, no matter how simple I write it, i get and error about the symbol
$
not being recognized.Error Message & Stack Trace
Config
Copy the content from
.yo-rc.json
:Relevant Links
I don't have relevant links but I've a fix. In the
./conf/webpack.conf.js
, this section:The order is wrong. It should be:
Environment
Tell us which operating system you are using, as well as which versions of Node.js, npm, and yo. Run the following to get it quickly: