Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS imports do not work for component CSS #4285

Closed
filipesilva opened this issue Jan 30, 2017 · 2 comments · Fixed by #4667
Closed

CSS imports do not work for component CSS #4285

filipesilva opened this issue Jan 30, 2017 · 2 comments · Fixed by #4667
Assignees
Labels
P1 Impacts a large percentage of users; if a workaround exists it is partial or overly painful

Comments

@filipesilva
Copy link
Contributor

In beta.26, the following results in a runtime error:

// src/app/app.component.css
@import '~bootstrap/scss/bootstrap'
http://localhost:4200/~bootstrap/scss/bootstrap Failed to load resource: the server responded with a status of 404 (Not Found)
polyfills.bundle.js:6292 Unhandled Promise rejection: Failed to load ~bootstrap/scss/bootstrap ; Zone: <root> ; Task: Promise.then ; Value: Failed to load ~bootstrap/scss/bootstrap 

For global styles, css-loader is what resolves imports currently. Component styles had css-loader added in an incorrect way, which resulted in broken CSS (fixed by @clydin in #3511).

Using 'exports-loader?module.exports.toString()' together with css-loader fixes this bug, but I know @clydin is currently working in css-loader replacement functionality via PostCSS plugins for imports, which also solves the problem so it's better to wait for that solution.

@filipesilva filipesilva added command: build P1 Impacts a large percentage of users; if a workaround exists it is partial or overly painful labels Jan 30, 2017
@rainstormza
Copy link

change file extension to scss it works well

styleUrls: ['./test.scss'],

in my test.scss file I use
@import '../../../assets/admin/css/ionicons.min.css';

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
P1 Impacts a large percentage of users; if a workaround exists it is partial or overly painful
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants