SASS doesn't compile with 3rd party libraries

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.

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.

@hansl

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

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() ] 
        
             }, 
        
           })

Hi doug

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

Navigation Menu

Repository navigation

SASS doesn't compile with 3rd party libraries #3683

OS?

Versions.

Repro steps.

The log given by the failure.

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

SASS doesn't compile with 3rd party libraries #3683

Description

OS?

Versions.

Repro steps.

The log given by the failure.

Activity

hansl commented on Dec 21, 2016

admosity commented on Dec 21, 2016

admosity commented on Dec 21, 2016

admosity commented on Dec 22, 2016

angular-automatic-lock-bot commented on Sep 6, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions