Can't import global styles in my styles.css

Question

I have seen several times, when reading the documentation about a module, that, to import a style, instead of adding directly the path angular cli, often, the documentation use this kind of instruction (i'm using an example for Kendo UI for angular):

@import "~@progress/kendo-theme-default/scss/all";

But this is not working if because i get this error

ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./src/styles.css Module not found: Error: Can't resolve '@progress/kendo-theme-default/scss/all' in 'C:\Users\DSartori\Desktop\angularProject1\ant-test\src' resolve '@progress/kendo-theme-default/scss/all' in 'C:\Users\DSartori\Desktop\angularProject1\ant-test\src'

as far as i understand it looks for the files in the wrong directory, cause, instead of looking for @progress.. in node_modules, is looks in the src folder.

How can i resolve? Note that :

• I noticed that the files that I want to import are not simple css, but scss, and also that instruction should be written in the styles.scss . Do I need to proceed as stated here ?

• In the directory progress/kendo-theme-default/scss/all there are several scss files that i want to import, and i would like to avoid to add them one by one in the angular-cli.json file

If something is not clear or you need more details, please ask instead of downvote

Answer 1

The line @import "~@progress/kendo-theme-default/scss/all";, referenced in the styling help topic, can be used only in scss files -- it includes the theme by source. The answer that you linked to shows how to configure your angular-cli application to use scss files by default, which will resolve the problem.

Alternatively, you can include the CSS of the complete theme, although that solution may be less flexible (you can't import the theme only for the widgets that you are using).

For more information about how to include the themes in your project, refer to the styling overview help topic, which shows all available options and their benefits.