SASS doesn't compile with 3rd party libraries

[admosity]

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.

[hansl]

If your import is from node_modules, SASS/SCSS says it should start with ~; you should @import '~foundation-sites/scss/util/util or use a relative path. This is not an issue with the CLI per se.

[admosity]

@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 includePaths configuration, but the webpack configuration is blackboxed in angular-cli.

[admosity]

Added this and now it works fine on the v1.0.0-beta.22-1 release:

Location of edit:

angular-cli/packages/angular-cli/models/webpack-build-common.ts

Lines 135 to 140 in 9687081

	new webpack.LoaderOptionsPlugin({
	test: /\.(css|scss|sass|less|styl)$/,
	options: {
	postcss: [ autoprefixer() ]
	},
	})

[admosity]

Hi doug

[angular-automatic-lock-bot]

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.}