I have successfully scaffolded my Angular project using Webpack. All JS functionality seems to be included in bundle.js and all of my dynamic CSS is compiling and is accessible by linking to ./styles/main.css.
My problem is that I have about 10 static CSS files that need to be linked to a well. I know I can hard-code a <link> tag for each of them into the HTML page where I bootstrap my Angular app, but I believe there is a way to minify and combine all of these files into something like /styles/bundle.css, which I could then link to in my static HTML... or possibly combine them with the contents of /styles/main.css, which I'm already linking to.
Is this possible?
Here is the loaders JSON from my webpack.config.js:
loaders: [{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components|externals)/,
cacheable: true,
loader: 'babel-loader',
query: {
presets: 'es2015',
//optional: ['runtime', 'es7.asyncFunctions'],
//retainLines: true,
cacheDirectory: true
}
}, {
test: /\.js$/,
loader: 'transform/cacheable?brfs!transform/cacheable?envify',
exclude: /(node_modules|bower_components|externals)/,
cacheable: true
}, {
//test: /\.css$/,
//loader: ExtractTextPlugin.extract('style-loader', 'css-loader') },
test: /\.css$/,
loader: 'style-loader!css-loader',
cacheable: true
//exclude: /(node_modules|bower_components)/
}, {
test: /\.scss$/,
loader: 'style!css!sass?sourceMap',
cacheable: true,
exclude: /(node_modules|bower_components|externals)/
}, {
test: /\.sass$/,
// Passing indentedSyntax query param to node-sass
loader: 'style!css!sass?indentedSyntax&sourceMap',
cacheable: true,
exclude: /(node_modules|bower_components|externals)/
}, {
test: /\.less$/,
loader: 'style!css!less?strictMath&noIeCompat',
cacheable: true,
exclude: /(node_modules|bower_components|externals)/
}, {
test: /\.html$/,
cacheable: true,
loader: 'html',
query: {
attrs: false // indicates that image src should not be processed
}
}, {
test: /\.json$/,
cacheable: true,
loader: 'json'
}, {
test: /\.woff/,
loader: 'url?prefix=font/&limit=10000&mimetype=application/font-woff'
}, {
test: /\.ttf/,
loader: 'file?prefix=font/'
}, {
test: /\.eot/,
loader: 'file?prefix=font/'
}, {
test: /\.svg/,
loader: 'file?prefix=font/'
}]
Related
I am using css modules in my react application. After setting modules:true inwebpack.config.js, I am able to get css from files which I created in my src folder. I am importing some components from node-modules. But the css of components present in node-modules is not getting applied.
I also tried importing css of node-modules using import 'path'; but it didnt work.
If I set modules:false, css of node-modules is getting applied and css of files in src folder is not getting applied.
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: true,
},
}
],
},
],
},
};
This might be due to the node module you are using may not be following module syntax. I mean they might be setting classes directly with a string instead of using like style.someClassName. So, you need 2 entries in your rules 1 for your stuff and 1 for node modules.
for ex:
module.exports = {
module: {
rules: [{
test: /\.css$/,
exclude: /node_modules/,
use: [{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: true,
},
}
],
}, {
test: /\.css$/,
include: /node_modules/,
use: [{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: false,
},
}
],
}],
},
};
i'm new to webpack and following a course. But one thing they don't really talk about is how to compile different sass to css.
I've given it a try here, but am getting an error. I'm trying to get it to output to styles.css for use with wordpress
const path = require('path'),
settings = require('./settings');
module.exports = {
entry: {
home: [
settings.themeLocation + "js/scripts.js"
],
style: [
settings.themeLocation +'styles/main.sass'
]
App: settings.themeLocation + "js/scripts.js"
},
output: {
home: [
path: path.resolve(__dirname, settings.themeLocation + "js"),
filename: "scripts-bundled.js"
]
style:[
path: path.resolve(__dirname, settings.themeLocation + "styles"),
filename: "styles-bundled.css"
]
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
},
{ test: /\.css$/, use: 'css-loader' }
{ test: /\.sass$/, use: 'sass-loader' }
]
},
mode: 'development'
}
Here is a snippet from my webpack config
You need to install style-loader, css-loader and sass-loader
The following snippet is for development part
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
sourceMap: true,
},
},
],
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
sourceMap: true,
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
},
},
],
},
For production
{
test: /\.css$/,
exclude: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
minimize: true,
importLoaders: 2,
},
},
],
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
minimize: true,
importLoaders: 3,
},
},
'sass-loader',
],
},
& add the folling to plugin section
new MiniCssExtractPlugin({
filename: '[name].[chunkhash:8].css',
}),
Note that the above snippets may not work directly for you, Its is just to give you idea how webpack can handle css $ scss
I'm updating a project to new webpack and angular versions.
My webpack.config is as follows:
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: ['es2015']
}
},
{
test: /\.(jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/,
loader: "url-loader?name=[name].[hash:20].[ext]&limit=10000"
},
{
test: /\.ts$/,
loaders: ['ts-loader', 'angular2-template-loader?keepUrl=true'],
exclude: [/\.(spec|e2e)\.ts$/]
},
{
test: /\.css$/,
use: ['style-loader', {
loader: 'css-loader',
options: {
sourceMap: false,
importLoaders: 1
}
}, 'postcss-loader']
},
{
test: /\.html$/,
use: 'raw-loader'
},
{
test: /\.(svg)$/,
loader: 'html-loader'
},
]
}
and postcss.config:
module.exports = {
parser: 'postcss-scss',
plugins: {
'postcss-import': {},
'postcss-cssnext': {},
'cssnano': {}
}
Now I'm getting an error in the title of the question.
I know it was asked several times, but none of the answers helped me. What's wrong with my configs?
}
All my components have something like styleUrls: ['./component.style.css']. So I guess the problem is that those files can not be read. But I don't have an idea why
I have went over every stack overflow post regarding this issue, and still have been unable to solve this issue. I cannot get background-image: url() to work for the life of me. I am not kidding when I say I have gone through every post. Why is webpack so frustrating when it comes to this simple task? Below is my modules in my webpack.config. Please someone help I have been at this for two days.
module: {
loaders: [
{test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel-loader']},
{test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' },
{test: /\.css$/, loader: 'style-loader!css-loader'},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css!scss')
},
{test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=images/svg+xml" },
{test: /\.(jpe?g|png|gif|svg)$/i, loaders: [
'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false',
'url-loader?limit=90000000&name=src/images/[name].[ext]'
]}
]
}
You need to use resolve-url-loader to be able to use relative paths in scss, here an example of how to use it:
module: {
rules: [{
test: /\.scss$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
use: [
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[local]'
}
}, {
loader: 'resolve-url-loader',
options: {
sourceMap: true
}
}, {
loader: 'sass-loader',
options: {
outputStyle: 'compressed',
sourceMap: true
}
}
]
})
}, {
test: /\.(jpe?g|png|gif|svg)$/,
loaders: [{
loader: 'file-loader',
options: {
name: '[path][name].[hash:base64:5].[ext]',
publicPath: '/',
outputPath: 'img/'
}
}, {
loader: 'image-webpack-loader',
options: {
gifsicle: {
interlaced: false
},
optipng: {
optimizationLevel: 7
},
pngquant: {
quality: '65-90',
speed: 4
},
mozjpeg: {
progressive: true,
quality: 70
}
}
}]
}]
}
Pay attention to the options in file-loader that configuration tells webpack where to output the images.
In this commit there is a running example.
I'm having problem loading css, containing eot into main scss file. It looks like webpack is not using correct loader for eot file. How to find/ fix this problem?
My webpack.dev.js:
entry: {
main: [
'webpack-dev-server/client?http://localhost:3000',
'./src/main'
],
vendor: [
'es6-shim',
'angular2/bundles/angular2-polyfills',
'angular2/common',
'angular2/core',
'angular2/platform/browser',
'angular2/router',
'firebase',
'immutable',
'rxjs',
'ng2-material/dist'
]
},
output: {
filename: '[name].js',
path: path.resolve('./target'),
publicPath: '/'
},
resolve: {
extensions: ['', '.ts', '.js'],
modulesDirectories: ['node_modules'],
root: path.resolve('./src')
},
module: {
loaders: [
{test: /\.html$/, loader: 'raw'},
{test: /\.scss$/, include: [path.resolve(__dirname, 'src/components')], loader: 'raw!postcss-loader!sass'},
{test: /\.scss$/, include: [path.resolve(__dirname, 'src/styles')], loader: 'style!css!postcss-loader!sass'},
{test: /\.ts$/, exclude: [/\.spec\.ts$/, /node_modules/], loader: 'ts'},
{test: /\.css$/, loader: 'style!css'},
{test: /\.ttf|eot|svg|woff$/, loader: 'file-loader' }
],
I import css in my style.scss file:
#import
"~ng2-material/dist/ng2-material.css",
"~ng2-material/dist/font.css";
And I'm getting this error:
[WDS] Errors while compiling.
client?843a:47./~/ng2-material/dist/MaterialIcons-Regular.eot
Module parse failed: d:\Software Development\Ironing\node_modules\ng2-material\dist\MaterialIcons-Regular.eot Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./~/css-loader!./~/ng2-material/dist/font.css 6:133-171
try this inside webpack.config.js:
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&minetype=application/font-woff"
}, {
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&minetype=application/font-woff"
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&minetype=application/octet-stream"
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file"
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&minetype=image/svg+xml"
}