Passing additional options to node-sass

[petomalina]

Versions:
angular-cli: 1.0.0-beta.11-webpack.2
node: 6.2.2
os: linux x64

Is there a way to pass additional options to node-sass with current configuration files? This was previously possible with angular-cli-build.js.

I need to pass include directory of bootstrap-sass for the bootstrap-material-design library, as it is importing "bootstrap/*" files but the library is located inside node_modules.

[petomalina]

I needed to customize webpack-build-development.ts file inside angular-cli so the library could be compiled correctly. Is there any way to do this by configuration in angular cli?

https://www.diffchecker.com/05czn5se

[filipesilva]

There is no way to do this right now, but we're getting a few requests for ways to add paths so it's likely to make it in.

[josenriq]

@gelidus Great hack. I wanted to do the same, but it doesn't seem to work.

• Changed webpack-build-development.ts
• Rebuilt the angular-cli project and ran npm link.
• Installed npm install bootstrap-sass as well, as that seems to be the path you referred to here https://www.diffchecker.com/05czn5se

Still getting the same errors for "bootstrap/*". Any suggestions are greatly appreciated.

[vmasek]

@linktothapast
I've written a workaround that works with angular-cli 1.0.0-beta.15, for 1.0.0-beta.11-webpack.2 just locate right files and adjust the script.

http://stackoverflow.com/questions/39635971/angular-cli-configure-sass-loader-to-include-node-modules-in-includepath/39726440#39726440

[hansl]

Closing this as obsolete. We support this.

[filipesilva]

@hansl we don't yet support it, work is ongoing in #2747. Its on my shortlist of stuff to look at and get sorted.

[armstrjare]

FYI for those looking for a temporary workaround on this, I've found one that works with SASS. The SASS compiler uses a SASS_PATH env variable, so if you set that then everything seems to work swell. You just need to make sure the env var is set when you run any ng commands.

In my project root directory, I have:

# env.rc
export SASS_PATH="`pwd`/src/css"

And in my package.json:

{
  "scripts": {
     "start": "source ./env.rc && ng serve"
     ...
   }
}

[jpzwarte]

Why limit this to just includePaths? I want to use the node-sass data option (https://github.com/sass/node-sass#data) to automatically include a setup stylesheet for all components:

data: '@import \'variables\';'

This way, you don't have to include the variables stylesheet in every component stylesheet where you want to use global variables.

Please change additionalProperties to true?. cc @filipesilva

[Ennas]

Is this fix (i.e using stylePreprocessorOptions) available for LESS?

[filipesilva]

@jpzwarte we're not looking at adding all the configuration options each preprocessor supports, it would be practically unmaintainable. This one was a highly demanded one so it was added.

@Ennas no, LESS did not support it at the time AFAIK.

[jpzwarte]

@filipesilva i understand :) It's just that having a "setup" stylesheet with SASS variables & mixins and not having to @import that everywhere seems like something that adds value for everyone :)

[spikyjt]

@filipesilva I'm not quite sure why we can't just pass through any options that preprocessors support, rather than having to "support" them? I can see from the way that you have implemented this option, that it would be unmaintainable to have to set them all up in webpack-build-styles.ts. However, there is also much demand for the data option, see #1253 #3700 and comments on https://netbasal.com/angular-cli-and-global-sass-variables-a1b92d8ca9b7 to mention a few.

Since the data property would just be passed through as is, would adding it be a big job?

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