Clarity: [SASS] with angular-cli it's impossible to import sass file in .angular-cli.json

[Rebolon]

Select one ... (check one with "x")

[ ] bug
[ ] feature request
[x ] enhancement

Expected behavior

In a project built with angular-cli, i would like to import Clarity ui and Clarity icons using the sass files.
To do this i add the clarity-ui/src/main.scss and clarity-icons/src/clarity-icons.scss in the .angular-cli.json in the styles section.
The app should generate the css files.

Actual behavior

When i start the app with ng serve, it fails to compile

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./~/clarity-ui/src/main.scss
Module build failed: 
undefined
^
      File to import not found or unreadable: node_modules/bootstrap/scss/variables.
Parent style sheet: stdin
      in C:\dev\javascript\project\euronews-cms-v2\node_modules\clarity-ui\src\main.scss (line 11, column 1)
 @ ./~/clarity-ui/src/main.scss 4:14-157
 @ multi ./src/styles.scss ./~/clarity-icons/src/clarity-icons.scss ./~/clarity-ui/src/main.scss ./~/font-awesome/css/font-awesome.css

Reproduction of behavior

here is the code to chang in your .angular-cli.json file :

...
"apps": { 
   ...
   "styles": [
                "styles.scss",
                "../node_modules/clarity-icons/src/clarity-icons.scss",
                "../node_modules/clarity-ui/src/main.scss",
                "../node_modules/font-awesome/css/font-awesome.css"
            ],
   ...
"defaults": {
        "styleExt": "scss",
   ...

Environment details

• Angular version: 4.1.2

• Clarity version: 0.9.5

• OS and version: windows

• Browser: all

[mathisscott]

@Rebolon
If you look at main.scss, there are some Bootstrap dependencies that it is probably having a hard time finding. I would say, at this time, the expected route to do what you are trying to do is to create (copy-paste) your own version of a main.scss based off of ours and then point the paths in it to where the files are located in your own project.

This is similar to how you would have to build a custom/themed version of Bootstrap with SCSS...

[Rebolon]

Ok, thanks for help

[craig-o-curtis]

Generating a new angular-cli project with ng new my-app --style scss -d and ng new my-app --style scss, I got the same problem. I found two fixes:

1. npm install
   2 npm install node-sass // this should be the sure-fire one if npm install doesn't work.

[mathisscott]

@craig-o-curtis
Thanks for posting that. I'm sure members of Clarity community will find it helpful!

[leresche]

For compile your app using clarity-ui/main.scss, you will modify this file and add a reference to bootstrap/functions before another dependencies, because _variables.scss file from bootstrap needs functions for colors.

/* Bootstrap 4 Dependencies - Begin Part 1 /
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/normalize";
/ Bootstrap 4 Dependencies - End Part 1 */

Sorry about my bad english.

[mathisscott]

@leresche
Are you pointing out an issue you are having with compiling main.scss or letting people know how to do it?

Our StackOverflow channel is a great place to post questions and answers on things like this as well...

[leresche]

I'm showing you how to compile.
For me it worked this way.

And the standard bootstrap 4 package does not contain the _normalize.scss file, I had to manually download and copy it.

My setup uses Angular CLI 1.4.2 and Angular 4.2.4

[DiDumbldore]

This article step by step helped me perfectly https://shermandigital.com/blog/bootstrap-sass-with-angular-cli/

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.