在 angular 中使用样式时找不到 scss 文件

Question

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:

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

       "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????

Answer 1

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. eg _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 .