unable to import _.scss partial files into Angular CLI project

[hbweb]

Please provide us with the following information: I'm unable to import SCSS partial files into Angular CLI and getting error when running ng serve

OS?

Windows 10 (Win32 x64) angular-cli: 1.0.0-beta.17 node: 6.9.1 os: win32 x64

Versions.

angular-cli: 1.0.0-beta.17 node: 6.9.1 npm: 3.10.8

Repro steps.

1. Install Gov.uk npm package from https://github.com/alphagov/govuk_elements

npm install govuk-elements-sass --save

1. Include scss files into angular-cli.json file

"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "../node_modules/govuk-elements-sass/public/sass/_govuk-elements.scss", "styles.scss" ],

The log given by the failure.

ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./~/govuk-elements-sass/public/sass/_govuk-elements.scss Module build failed: undefined ^ File to import not found or unreadable: colours Parent style sheet: stdin in D:\workspace\dnaapp\node_modules\govuk-elements-sass\public\sass\_govuk-elements.scss (line 6, column 1) @ ./~/govuk-elements-sass/public/sass/_govuk-elements.scss 4:14-147 @ multi styles

Mention any other details that might be useful.

Thanks! We'll be in touch soon.

[clydin]

It looks like it is importing properly. The issue is that the file is importing additional files; one of which cannot be found: colours. From the README for the referenced package, additional dependencies appear to be required.

Granted the error is somewhat cryptic, but in the future, Stack Overflow is probably the proper venue (at least initially) for questions such as this.

[hbweb]

Thanks @clydin - Yeah I've also figured out that Angular CLI does found the files and import them.. just the library that we use need to tweak a bit to get it working.

Cheers

[hbweb]

Actually, Angular CLI does not seem to import partials files before the main scss loaded therefore it said colour was not imported.

Here is what I have included into angular-cli.json file where you can see _colours.scss was already included.

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",

        "../node_modules/govuk_frontend_toolkit/stylesheets/_colours.scss",
        "../node_modules/govuk_frontend_toolkit/stylesheets/_font_stack.scss",
        "../node_modules/govuk_frontend_toolkit/stylesheets/_measurements.scss",
        "../node_modules/govuk_frontend_toolkit/stylesheets/_conditionals.scss",
        "../node_modules/govuk_frontend_toolkit/stylesheets/_device-pixels.scss",
        "../node_modules/govuk_frontend_toolkit/stylesheets/_grid_layout.scss",
        "../node_modules/govuk_frontend_toolkit/stylesheets/_typography.scss",
        "../node_modules/govuk_frontend_toolkit/stylesheets/_shims.scss",
        "../node_modules/govuk_frontend_toolkit/stylesheets/_helpers.scss",
        "../node_modules/govuk_frontend_toolkit/stylesheets/_url-helpers.scss",
        "../node_modules/govuk_frontend_toolkit/stylesheets/_css3.scss",
        "../node_modules/govuk_frontend_toolkit/stylesheets/design-patterns/_alpha-beta.scss",
        "../node_modules/govuk_frontend_toolkit/stylesheets/design-patterns/_buttons.scss",
        "../node_modules/govuk_frontend_toolkit/stylesheets/design-patterns/_breadcrumbs.scss",
        "../node_modules/govuk_frontend_toolkit/stylesheets/design-patterns/_media-player.scss",

        "styles.scss",
        "../node_modules/govuk-elements-sass/public/sass/_govuk-elements.scss"

      ],

[clydin]

The problem is that there is still import statements in _govuk-elements.scss looking for several files (including colours) relative to its own location.

There's a WIP PR to allow the configuration of saas/scss include paths which would simplify your setup. But until then you'll need to reconstruct _govuk-elements.scss with adjusted paths to the files.

[hbweb]

Thanks @clydin for pointing that out.

I tried to reconstruct _govuk-elements.scss and moved all @import from dependencies toolkit to styles.scss file .. then update its location as below.. however still no luck.

$path: "/assets/images/";

// GOV.UK front end toolkit
// Sass variables, mixins and functions
// https://github.com/alphagov/govuk_frontend_toolkit/tree/master/stylesheets

// Settings (variables)
@import "../node_modules/govuk_frontend_toolkit/stylesheets/colours";                                // Colour variables
@import "../node_modules/govuk_frontend_toolkit/stylesheets/font_stack";                             // Font family variables
@import "../node_modules/govuk_frontend_toolkit/stylesheets/measurements";                           // Widths and gutter variables

// Mixins
@import "../node_modules/govuk_frontend_toolkit/stylesheets/conditionals";                           // Media query mixin
@import "../node_modules/govuk_frontend_toolkit/stylesheets/device-pixels";                          // Retina image mixin
@import "../node_modules/govuk_frontend_toolkit/stylesheets/grid_layout";                            // Basic grid layout mixin
@import "../node_modules/govuk_frontend_toolkit/stylesheets/typography";                             // Core bold and heading mixins, also external links
@import "../node_modules/govuk_frontend_toolkit/stylesheets/shims";                                  // Inline block mixin, clearfix placeholder

// Mixins to generate components (chunks of UI)
@import "../node_modules/govuk_frontend_toolkit/stylesheets/design-patterns/alpha-beta";
@import "../node_modules/govuk_frontend_toolkit/stylesheets/design-patterns/buttons";
@import "../node_modules/govuk_frontend_toolkit/stylesheets/design-patterns/breadcrumbs";

// Functions
@import "../node_modules/govuk_frontend_toolkit/stylesheets/url-helpers";                            // Function to output image-url, or prefixed path (Rails and Compass only)

@import "govuk-elements";

It comes up with a different error message complaining about variable has not been defined which means the _colours.scss has not been included.

ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./~/govuk-elements-sass/public/sass/_govuk-elements.scss
Module build failed:
undefined
               ^
      Undefined variable: "$grey-2".
      in D:\workspace\dnaapp\node_modules\govuk-elements-sass\public\sass\elements\_helpers.scss (line 14, column 17)
 @ ./~/govuk-elements-sass/public/sass/_govuk-elements.scss 4:14-147
 @ multi styles

ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.scss
Module build failed:
@import "govuk-elements";
^
      File to import not found or unreadable: govuk-elements
Parent style sheet: stdin
      in D:\workspace\dnaapp\src\styles.scss (line 29, column 1)
 @ ./src/styles.scss 4:14-159
 @ multi styles

I'm stumped !

[simonh1000]

I'm seeing the same problem. My project is not huge and I was trying to import some variables from _variables.scss. In the end i had to delete (not just // comment out) the @import line and add the variables in each file they were needed. Not scalable of course

[hbweb]

@simonh1000 agree. I ended up coping all scss files into 'scss' folder /app/scss and import them into style.scss file. Not ideal as we have to do it again when a newer version of scss files released.

[davidrock]

Hey guys something new about this ? I am stuck with the import partials problem too.

[raff77]

Interesting that it will import partials from the node_modules folder, Can we have the angular-cli.json configure the webpack sassLoaders property; in fact, why can't we have custom webpack configs for angular-cli projects?

edit If you drop you sass variables into your node_modules folder it will work. [not ideal] but a work around. I suggest allowing a configuration int he angular-cli,json for a sass partials folder(s).

[clydin]

You can configure include paths for stylesheet preprocessors via angular-cli.json. See here for details: https://github.com/angular/angular-cli/wiki/stories-global-styles

[filipesilva]

Closing as we added sass paths support.

[kylestephens]

The issue, as reported, doesn't relate to sass paths in the import. The issue is that it cannot resolve a valid path when that relates to a sass partial.

Error: Compilation failed. Resource file not found: /Users/kyle/Workspace/project/cli-universal/src/app/scss/core/variables

File:

/Users/kyle/Workspace/project/cli-universal/src/app/scss/core/variables

exists at:

/Users/kyle/Workspace/project/cli-universal/src/app/scss/core/_variables.scss

This should resolve correctly but it doesn't. Still occurring. Suggest re-opening.

[mchambaud]

+1

This is painful.

[haydenhancock]

+1

Doesn't appear that partials are being loaded correctly.

[82antu]

Hi,

Same issue Here, why is still closed ?

[KEMBL]

+1 If I am trying to import css like this

@import "/app/assets/css/fonts.css";

and then open in Chrome : F12 / Sources I see the path with name 'app/assets/css' as one literal instead of a set of folders app / assets / css so itis probably the problem with import - it does not put resource in proper place.

Demo: https://imgur.com/2AZnyPK

[aemonge]

Hey, Y'all

I think this issue is still happening. Do we have any solution for it ?

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}