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.