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

[kylestephens]

Bug Report or Feature Request (mark with an x)

- [ x ] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.0.0
node: 6.3.0
os: darwin x64
@angular/animations: 4.1.3
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/core: 4.1.3
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/platform-server: 4.1.3
@angular/router: 4.1.3
@angular/cli: 1.0.0
@angular/compiler-cli: 4.1.3

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.

Duplicate of #2880 but that was closed without resolution. (see final comment in that thread)

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 complaining about:

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

File exists at:

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

[clydin]

The core of your issue is that the package govuk-elements-sass imports a file that does not exist within that package.

According to the documentation for the package, govuk_frontend_toolkit is also needed. The path to that package's stylesheets also needs to be configured as a stylesheet preprocessor include path.

If you are still running into problems after the above setup, please let us know.

[Brocco]

Solution provided by @clydin (thanks!).... closing as resolved.

[benoitdeziel]

Solution provided does not work.

Using NGC

[angular-automatic-lock-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.}