0

I have the following mix of Material and bootswatch which cause a compiler error:

@import '~@angular/material/prebuilt-themes/indigo-pink.css';
@import "~bootswatch/dist/yeti/_variables.scss";
@import "~bootstrap/scss/bootstrap.scss";
@import "~bootswatch/dist/yeti/_bootswatch.scss";
@import '~font-awesome/scss/font-awesome';

The error is:

    ERROR in ./src/styles.css (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./src/styles.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(1:4) Unknown word

> 1 | // Yeti 4.3.1
    |    ^
  2 | // Bootswatch
  3 |

According to this, I can use ng set defaults.styleExt scss to start processing Sass files.

However, it doesn't go through the process of converting your already existing .css files to .scss files. You'll have to make the conversion manually.

Can keep my css files and import what I need of sass files, side by side?

Thank you in advance

Improve this question
3
  • You can just import the sass files into your project. If you are doing a sass -watch and outputting it to a normal css file, then just import your compiled css file. Commented Feb 28, 2019 at 13:25
  • If my answer does not help could you let us know what error is shown when trying to import the stylesheets? Commented Feb 28, 2019 at 13:29
  • @designtocode how does sass -watch work? Commented Feb 28, 2019 at 13:35

1 Answer 1

Reset to default
0

If you are going to support SASS in your application, consider only replacing the extension of your css files with .sass which will work without any further modification. This is because SASS is a superset of CSS and therefore simple CSS will be fully compatible.

Edit: Would the imported CSS not be of your own but rather from an external package (such as a node module), then removing the .css extension from your import should fix the problem:

@import '~@angular/material/prebuilt-themes/indigo-pink';
@import "~bootswatch/dist/yeti/_variables.scss";
@import "~bootstrap/scss/bootstrap.scss";
@import "~bootswatch/dist/yeti/_bootswatch.scss";
@import '~font-awesome/scss/font-awesome';
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Is that replace works for angular material files? because in that case I should execute ng set defaults.styleExt scss and start replacing all of my files I guess, how can I be sure not to leave any one?..
@TiyebM in this case I would not recommend the first solution as your changes will be overriden when reinstalling the external package. Let me know whether the second solution works for you.