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

hbweb · 2016-10-25T10:42:31Z

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.

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

npm install govuk-elements-sass --save

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.

The text was updated successfully, but these errors were encountered:

clydin · 2016-10-25T13:03:08Z

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 · 2016-10-25T13:22:39Z

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 · 2016-10-25T14:44:52Z

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 · 2016-10-25T14:58:48Z

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 · 2016-10-25T16:03:27Z

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 · 2016-10-28T18:46:46Z

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 · 2016-11-05T13:36:19Z

@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 · 2017-03-18T04:24:48Z

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

raff77 · 2017-03-21T15:50:36Z

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 · 2017-03-22T13:52:35Z

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 · 2017-05-22T12:26:17Z

Closing as we added sass paths support.

kylestephens · 2017-06-07T15:11:10Z

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 · 2017-06-19T20:56:49Z

+1

This is painful.

haydenhancock · 2017-08-01T04:11:36Z

+1

Doesn't appear that partials are being loaded correctly.

82antu · 2017-10-27T06:59:25Z

Hi,

Same issue Here, why is still closed ?

KEMBL · 2017-11-02T15:19:03Z

+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 · 2018-07-24T13:46:38Z

Hey, Y'all

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

angular-automatic-lock-bot · 2019-09-08T09:41:55Z

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.}

hbweb closed this as completed Oct 25, 2016

hbweb reopened this Oct 25, 2016

filipesilva added the needs: investigation Requires some digging to determine if action is needed label Nov 3, 2016

filipesilva added command: build P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent labels Nov 5, 2016

hansl modified the milestone: RC1 Nov 11, 2016

Splaktar mentioned this issue Dec 14, 2016

feat(build): add support for assets array #2570

Merged

raff77 mentioned this issue Mar 29, 2017

Q: Using compass and other sass mixins with angular-cli? #2115

Closed

hansl removed this from the RC1 milestone May 2, 2017

filipesilva closed this as completed May 22, 2017

kylestephens mentioned this issue Jun 7, 2017

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

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

hbweb commented Oct 25, 2016

clydin commented Oct 25, 2016 •

edited

Loading

hbweb commented Oct 25, 2016

hbweb commented Oct 25, 2016

clydin commented Oct 25, 2016

hbweb commented Oct 25, 2016

simonh1000 commented Oct 28, 2016

hbweb commented Nov 5, 2016

davidrock commented Mar 18, 2017

raff77 commented Mar 21, 2017 •

edited

Loading

clydin commented Mar 22, 2017 •

edited

Loading

filipesilva commented May 22, 2017

kylestephens commented Jun 7, 2017

mchambaud commented Jun 19, 2017

haydenhancock commented Aug 1, 2017

82antu commented Oct 27, 2017

KEMBL commented Nov 2, 2017

aemonge commented Jul 24, 2018

angular-automatic-lock-bot bot commented Sep 8, 2019

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

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

Comments

hbweb commented Oct 25, 2016

OS?

Versions.

Repro steps.

The log given by the failure.

Mention any other details that might be useful.

clydin commented Oct 25, 2016 • edited Loading

hbweb commented Oct 25, 2016

hbweb commented Oct 25, 2016

clydin commented Oct 25, 2016

hbweb commented Oct 25, 2016

simonh1000 commented Oct 28, 2016

hbweb commented Nov 5, 2016

davidrock commented Mar 18, 2017

raff77 commented Mar 21, 2017 • edited Loading

clydin commented Mar 22, 2017 • edited Loading

filipesilva commented May 22, 2017

kylestephens commented Jun 7, 2017

mchambaud commented Jun 19, 2017

haydenhancock commented Aug 1, 2017

82antu commented Oct 27, 2017

KEMBL commented Nov 2, 2017

aemonge commented Jul 24, 2018

angular-automatic-lock-bot bot commented Sep 8, 2019

clydin commented Oct 25, 2016 •

edited

Loading

raff77 commented Mar 21, 2017 •

edited

Loading

clydin commented Mar 22, 2017 •

edited

Loading