Repository navigation
SASS doesn't compile with 3rd party libraries #3683
Description
Tried looking for this issue, but couldn't find it. EDIT: Found it now #2747
Currently unable to include a sass library that imports another sass library. Need a way to expose the webpack configuration to pass in a path to include possibly.
OS?
Mac OSX (Sierra) 10.12.1
Versions.
angular-cli: 1.0.0-beta.22-1
node: 6.9.1
os: darwin x64
Repro steps.
Added this to angular-cli.json:
"styles": [
"styles/main.scss"
],styles/main.scss imports a third party library which in itself imports a third party library foundation-sites. Look at the log below:
The log given by the failure.
Hash: 96ac501307deff050924 i Time: 9373ms
chunk {0} main.bundle.js, main.bundle.map (main) 363 kB {2} [initial]
chunk {1} styles.bundle.js, styles.bundle.map (styles) 8.87 kB {3} [initial]
chunk {2} vendor.bundle.js, vendor.bundle.map (vendor) 3.02 MB [initial] [rendered]
chunk {3} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry]
ERROR in ./~/css-loader?sourcemap!./~/postcss-loader!./~/sass-loader?sourcemap!./src/styles/main.scss
Module build failed:
@import 'foundation-sites/scss/util/util';
^
File to import not found or unreadable: foundation-sites/scss/util/util
Parent style sheet: /Users/someuser/git/projects/some-project/node_modules/some-third-party-lib/scss/some-third-party-lib.scss
in /Users/someuser/git/projects/some-project/node_modules/some-third-party-lib/scss/some-third-party-lib.scss (line 11, column 1)
@ ./src/styles/main.scss 4:14-186
@ multi styles
webpack: bundle is now VALID.
Activity
hansl commentedon Dec 21, 2016
If your import is from
node_modules, SASS/SCSS says it should start with~; you should@import '~foundation-sites/scss/util/utilor use a relative path. This is not an issue with the CLI per se.admosity commentedon Dec 21, 2016
@hansl The third party library I am using is importing it that way. It is blackbox to me. That particular tilde convention is a webpack thing (for node_modules path resolution) as well and included in
sass-loader:https://github.com/jtangelder/sass-loader#imports
It is not part of any SASS/SCSS spec that I am aware of. I'm trying to figure out a way to pass in the
includePathsconfiguration, but the webpack configuration is blackboxed in angular-cli.admosity commentedon Dec 21, 2016
Added this and now it works fine on the
v1.0.0-beta.22-1release:Location of edit:
angular-cli/packages/angular-cli/models/webpack-build-common.ts
Lines 135 to 140 in 9687081
admosity commentedon Dec 22, 2016
Hi doug
angular-automatic-lock-bot commentedon Sep 6, 2019
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.