angular-cli: unable to import _.scss partial files into Angular CLI project

+1

This is painful.

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.

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 !

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

Closing as we added sass paths support.

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