Style with ~path is not resolved correctly #9166
Comments
clydin
added
type: bug/fix
P1
|
I think this is related to angular/angular#20676 |
|
@jameslafferty I'm not sure this is entirely related, as I had zero issues with importing the Material Design Icons until the most recent angular-cli version. @import '../../node_modules/material-design-icons/iconfont/material-icons.css';The issue seems to be that the new As a temporary quick fix, you can simply copy the font files to your project's local styles folder. |
|
Not limite to Window or sass. Using the directions to import the style sheets for Material results in a broken build: in styles.css: results in: |
|
Similar problem here, when upgrading the @angular/cli from 1.6.3 to 16.4
I had to downgrade back to 1.6.3... |
|
Meet the same issue. |
|
Same issue here. In my case there is build outside angular project directory
Angular CLI: 1.6.4 @angular/cli: 1.6.4
|
|
same issue just after the upgrade from @angular/cli 1.6.3 to 1.6.4 ERROR in ./node_modules/css-loader?{"sourceMap":false,"import":false}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./src/styles.css |
|
jep, confirmed, same issue. |
|
@baggior Remove '~' from import. |
|
@Taha-Di-Nero This worked but now I am getting an error inside webstorm ('Cannot resolve directory...') maybe from angular service? |
|
@Taha-Di-Nero That will cause the defect in the original issue to again manifest. The original issue was related to CSS url functions and windows path normalization (i.e., This is unconnected to the import issue observed by others in this issue. Of which there are two:
|
|
Stop
Jérémie Flahaut
… Le 12 janv. 2018 à 15:17, clydin ***@***.***> a écrit :
@Taha-Di-Nero That will cause the defect in the original issue to again manifest.
The original issue was related to CSS url functions and windows path normalization (i.e., \ vs /). This has been corrected in 1.6.4.
This is unconnected to the import issue observed by others in this issue. Of which there are two:
For the issue reported by @cpboyd, this is a confirmed defect and will be corrected in the next patch release (the workaround identified will be necessary until then). Note that SCSS already behaved in this manner and unfortunately there is no easy fix to address this within SCSS at this time.
For the tilde within imports issue, this is also a confirmed defect and will be corrected in the next patch release. Removing the tilde should allow the import to function. The tilde is actually a webpack specific addition; and when possible, and not inconvenient, removing its use will increase the transportability of the source.
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or mute the thread.
|
|
This sounds like something that could have easily been prevented by an automated tests, merely trying to build a trivial off-the-shelf Angular Material app (the kind of app you would build following Angular Material quickstart docs). I wonder if the CLI team could be persuaded to include something like that in the CLI test suite? |
|
Still the same error with @angular/[email protected] |
|
Still get same error with 1.6.7 but it looks a bit strange |
|
Is this issue abandoned? @hansl, do you guys have any plans to fix it? |
|
@Iverson All of the issues discussed in this thread have been addressed if using the latest stable release (1.7.3). If you are still encountering issues while using this version (within the project), please open a new issue with a minimal reproduction that demonstrates the problem. |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Hi!
I noticed that I cannot build my app properly on Windows, the problem seems to lie in ~ import in sass file (bootstrap specifically), the resolved path looks broken because it is doubled, take a look at the log
I guess the problem was caused by this code 9caa7ca#diff-aa06fda1fc53d1b1e6d1259f3cf4ca2d .
The resolved path for fonts becomes
c:\vhosts\frontend-client\src\c:vhosts�rontend-clientnode_modules�ootstrap-sass ssets�onts�ootstrapglyphicons-halflings-regular.eotVersions
Repro steps
$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';at the top@import "~bootstrap-sass/assets/stylesheets/bootstrap";Observed behavior
Desired behavior
Successful build
The text was updated successfully, but these errors were encountered: