I am learning angular 6 with #ngtools/webpack and I got a problem with dealing with css.
I have the following module rules in webpack.config.js
module: {
rules: [
{ test: /\.ts$/, loader: '#ngtools/webpack' },
{ test: /\.html$/, loader: 'raw-loader' },
{ test: /\.css$/, loader: 'raw-loader' }
]
}
When I use Component.styleUrls, the angular compiler will use the 'raw-loader' and inline the Component.styleUrls to Component.styles. It works fine.
Then I want to install 'ngx-toastr', I added
import './../node_modules/ngx-toastr/toastr.css';
to my index.ts. It doesn't work because 'raw-loader' is used here.
How can I correctly import 'toastr.css'?
I think if you add that css to "style" in ".angular-cli.json" file it will work fine.
after adding to style it should look like this
"styles": [
"styles.css",
"node_modules/bootstrap/ngx-toastr/toastr.css"
]
Can you create anycomponent.scss file, import the toastr.scss file using relative file path.
import './../node_modules/ngx-toastr/toastr.css';
Related
I am currently migrating an AngularJs project (v1.7.5) to Angular7.
I followed the migration instructions and everything is going pretty well.
Everything?
No, because a small problem resists over and over again.
Since I come from the AngularJs world I don't use AngularCLI and had to write my Webpack configuration by hand.
My problem:
When I try to use the pseudo-selector ":host" in my css files, it is not transformed into "_ngSomething" in my generated output (I use the ViewEncapsulation.Emulated mode).
My question:
Which module (component/loader) is in charge of transforming this pseudo-selector, and how to configure it?
I tried an "ng eject" to extract the webpack config from a project based on angularCLI, but this command seems inaccessible for the moment
Here is my current css section in webpack.conf file
{
test: /\.css$/,
use: [
"exports-loader?module.exports.toString()",
{ loader: "style-loader" },
{ loader: "css-loader", options: { importLoaders: 1 } },
{ loader: "postcss-loader" },
]
}
Thx for any help
As the title.
Some of libraries I want to use (Ex: font-awesome) use scss, while I prefer writing style with sass
How can I configure my project with webpack?
My current setting
...
rules: [
...
{
test: /\.(c|sa|sc)ss$/,
use: [
'style-loader',
'css-loader',
'scss-loader',
'sass-loader'
]
}
]
...
Thank you in advance
You can use react-app-rewired. You can copy what I did in this commit
Or if you want to directly change the webpack.config.js file then:
npm install style-loader css-loader --save-dev
and then in your webpack.config.js, add the following object in your rules array as shown below.
// webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS
]
}]
}
};
I have an issue where I import font awesome into my main scss file using #import. The issue is font awesome _varibles.scss uses a relative path to import its fonts ../fonts/*. This is causing an error because webpack is trying to load the file relative to the entry point which is the main sass file. I have been trying to use options such as includePaths with no luck and loaders like resolve-url-loader. I have tried multiple paths but no joy. the main.scss file is located in the sass folder along with a vendor folder that holds the font awesome data.
test: /\.scss$/,
use: [{
loader: "style-loader"
},
{
loader: 'css-loader'
},
{
loader: 'resolve-url-loader'
},
{
loader: 'sass-loader',
options: {
includePaths: [
path.resolve(__dirname, "assets/css/vendor/fontawsome/scss")
]
}
}
]
The issue isn't related to the fact that you misspelled fontawesome in your path?
"assets/css/vendor/fontawsome/scss"
This is the error I'm getting:
Error: Expected 'styles' to be an array of strings.
even though I've specified the styles in an array of strings:
styleUrls: ['./app.component.css']
Here is the relevant code, any ideas what I'm doing wrong?
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: `<h2 class="float-left">Hey</h2>`,
styleUrls: ['./app.component.css']
})
export class AppComponent { }
app.component.css
.float-left {
float: left;
}
Snippet from webpack.common.js
module: {
rules: [{
test: /\.ts$/,
loaders: ['awesome-typescript-loader', 'angular2-template-loader']
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.css$/,
loader: 'css-loader'
}]
},
As I have not personally experienced this - I did find a closed thread (but with some recent additions, nonetheless) - that may help you with your issue.
https://github.com/webpack-contrib/style-loader/issues/123
The first suggested, and apparently working at the time, solution that sticks out to me is this one:
{ test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] }
There are other suggestions and solutions listed further down; hopefully one of those will help you resolve your problem.
One thing to note - it seems it may/may not make a difference if you're using angular-cli. If you are, then make sure you're following their guidelines with using webpack, as they have a couple small differences, as opposed to using a non-angular-cli build.
You need to use style-loader after css-loader.
test: /\.css$/,
use: [{loader: 'style-loader'},{loader: 'css-loader'}]
The loaders in the "use" array are run in order from the last in the array to first in the array. First the css-loader is run to prepare the CSS, then the result is passed to the style-loader to embed the styles in the page.
I have forked (or ejected) off Facebook's create-react-app project, with the requirement to add a few additional tools (e.g. testing, redux, less etc.), and the perhaps naive assumption that straying a bit off the path wouldn't be too much of a problem.
I think I have just about managed to add less using the following webpack.config.dev.js:
//......
module: {
preLoaders: [
{
test: /\.js$/,
loader: 'eslint',
include: paths.appSrc,
}
],
loaders: [
// Process JS with Babel.
{
test: /\.js$/,
include: paths.appSrc,
loader: 'babel',
query: require('./babel.dev')
},
{
test: /\.css$/,
loader: 'style!css!postcss'
},
{
test: /\.less$/,
loader: 'style!css!postcss!less'
},
{
test: /\.json$/,
loader: 'json'
},
//......
}
]
},//.....
I have left the CSS loader in there (perhaps incorrectly) so that I can bring in the react/bootstrap library. Perhaps there is a better way of doing this.
Anyway, I am confused about how to add a pre-processor into webpack.config.prod.js. Here is a snippet (with Facebook's helpful comments):
loaders: [
// Process JS with Babel.
{
test: /\.js$/,
include: paths.appSrc,
loader: 'babel',
query: require('./babel.prod')
},
// The notation here is somewhat confusing.
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader normally turns CSS into JS modules injecting <style>,
// but unlike in development configuration, we do something different.
// `ExtractTextPlugin` first applies the "postcss" and "css" loaders
// (second argument), then grabs the result CSS and puts it into a
// separate file in our build process. This way we actually ship
// a single CSS file in production instead of JS code injecting <style>
// tags. If you use code splitting, however, any async bundles will still
// use the "style" loader inside the async code so CSS from them won't be
// in the main CSS file.
{
test: /\.css$/,
// "?-autoprefixer" disables autoprefixer in css-loader itself:
// https://github.com/webpack/css-loader/issues/281
// We already have it thanks to postcss. We only pass this flag in
// production because "css" loader only enables autoprefixer-powered
// removal of unnecessary prefixes when Uglify plugin is enabled.
// Webpack 1.x uses Uglify plugin as a signal to minify *all* the assets
// including CSS. This is confusing and will be removed in Webpack 2:
// https://github.com/webpack/webpack/issues/283
loader: ExtractTextPlugin.extract('style', 'css?-autoprefixer!postcss')
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},
How can I add a less pre-processor step in a stable and performant way?
For context my index.js imports look as follows:
import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
import { CommentsSectionContainer } from './components/CommentsSection';
import './index.less';
Install less and less-loader from npm or yarn:
npm install --save-dev less less-loader
Follow this link to install extract-text-webkit-plugin:
https://github.com/webpack/extract-text-webpack-plugin
First you need to add the loader in the loaders array, after css probably makes sense for readability. It will look like this:
{
test: /\.less$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
}
Then initialize the plugin in the plugins array:
new ExtractTextPlugin('[name].css')
Thaaaaaat should do it with another yarnpkg start