Comments (9)
I managed to fix it.
In webpack.common.js add this part:
{
test: /.scss$/,
exclude: /node_modules/,
loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
}
and remove scss from this part:
{
test: /.(scss|html|png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
use: 'raw-loader'
}
That enables @imports in sass to be resolved and compiled.
from universal.
I am running into the same thing. I am trying to import Bootstrap via the app.component.scss
file:
$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import "~bootstrap-sass/assets/stylesheets/bootstrap";
from universal.
Actually my issue might be unrelated, I just realized I was missing the bootstrap-sass
package. I added it and am running into other issues. Will report back what I find out.
from universal.
I think that fixed my issue. @paulogr might want to check that file "../../assets/colors"
actually exists
from universal.
I am getting the same error. Any ideas? File is there.
from universal.
i can resolve the issue that i have but with font-aweson, basically is the same configuration for both:
{ test: /\.scss$/, use: [{ loader: "to-string-loader" }, { loader: "css-loader" } }, { loader: "resolve-url-loader" }, { loader: "sass-loader", options: { sourceMap: true, data: '@import "styles";', includePaths: [ DIR ] } } ] }, { test: /\.(jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/, use: [{ loader: "file-loader" }] }
DIR // const DIR = join(process.cwd(), 'src', 'styles');
inside the style folder i have a file called
styles.scss
@import 'variables';
@import '../../node_modules/font-awesome/scss/font-awesome';
@import 'global';
inside _varibales.scss
$fa-font-path: "../../node_modules/font-awesome/fonts";
repo: https://github.com/FrozenPandaz/ng-universal-demo
from universal.
@ennyta
Where should we write this -
{
test: /.scss$/,
exclude: /node_modules/,
loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
}
in serverConfig or in browserConfig?
If in browserConfig then do we need to remove pre-defined scss rules?
from universal.
In webpack.common.js
from universal.
@paulogr @rahulbpatel @ennyta @mohitkadelongraph @ysus I was able to reproduce this error, and am going to push a fix within a couple of hours, so stay tuned guys.
from universal.
Related Issues (20)
- way to access the meta title HOT 1
- unreachable endpoint HOT 3
- why should we need `electron` in this project HOT 1
- html tags including webpack javascript syntax
- How to disable all the Junits.?
- func expressions not supported in decorators in reducers in aot HOT 1
- no setting found with the specified key HOT 3
- assets path HOT 1
- EEXIST: file already exists | @ngx-cache HOT 5
- how to set facebook og tags HOT 1
- Show html css in between route-app tag HOT 1
- Any ideas to integrate socket.io?
- Migrate LGTM.com installation from OAuth to GitHub App
- Build command project name typo HOT 1
- use sitemap-generator for SSR
- Angular 4 universal ReferenceError: document is not defined HOT 1
- getting issue on yarn start:ssr HOT 2
- Error: You must pass in a NgModule or NgModuleFactory to be bootstrapped
- error Type 'Request' is not generic
- Why do I see network requests at in Chrome broswer?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from universal.