CODEWITHSUNDEEP
javascriptangulartypescriptwebpack
mr coder
mr coder

Reputation: 209

not found the scss file when using styling in angular

i want to use the styling in angular for short address in scss files .

i using the styling by this way :

i create a folder in the src folder and put the style on that :

Image

and i go to angular-cli.json and i add this :

Image 2

       "stylePreprocessorOptions": {
          "includePaths": [
            "src",
            "src/stylings/",
            "src/stylings/base/",
            "src/stylings/kt-customs/"
          ]
        },

and i need to use that in the style.css like this way :

    @import "custom-form";
@import "custom-buttons";
@import "custom-table";
@import "custom-filter";
@import "kt-customise";

but it show me this error :

> ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/dist/cjs.js??ref--13-3!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/dist/cjs.js??ref--17-1!./src/styles.scss) Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Can't find stylesheet to import. ╷ 9 │ @import "custom-form"; │ ^^^^^^^^^^^^^ ╵ E:\MyProject\Ava\PFA\demo\src\styles.scss 9:9 root stylesheet

how can i solve this problem ????

Upvotes: 1

Views: 4073

Answers (1)

terahertz
terahertz

Reputation: 3481

I think the import paths you are using in your style.scss are wrong. It should be:

@import "./stylings/custom-form";
@import "./stylings/custom-buttons";
@import "./stylings/custom-table";
@import "./stylings/custom-filter";
@import "./stylings/kt-customise";

You may want to consider changing your scss files into scss partials files. That is, renaming both your scss files and your imports with a leading underscore. e.g. _custom-form.scss.

Individual scss files are transpiled into individual css files. Each @import in a css file creates a HTTP request. Which means more css files = more HTTP requests. Importing partials will result in fewer css files, and hence, fewer HTTP requests. You may read more on partials here: SASS Partials.

Upvotes: 0

Related Questions