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"
}
Related
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 am using webpack, I can "import" the css file without error, but the css is not exported in the final product.
Webpack excerpt:
module: {
loaders: [
{test: /\.css$/,loader: 'css-loader'},
{test: /\.scss$/,loader: ExtractTextPlugin.extract('css-loader!sass-loader')},
{test: /\.js$/, loader: 'babel-loader', include},
{test: /\.json$/, loader: 'json', include},
{test: /\.jpe?g$|\.gif$|\.png$/i, loader: "file-loader" },
]
},
Run:
npm install hopscotch
Code:
import 'hopscotch/dist/css/hopscotch.css';
I was not using extract for the css files...
{test: /\.css$/,loader: 'css-loader'},
Should be:
{test: /\.css$/,loader: ExtractTextPlugin.extract('css-loader')},
In addition to your answer, you also need to add ExtractTextPlugin to the plugins array to define where to export the extracted CSS.
module: {
loaders: [
{test: /\.css$/,loader: ExtractTextPlugin.extract('css-loader')},
{test: /\.scss$/,loader: ExtractTextPlugin.extract('css-loader!sass-loader')},
{test: /\.js$/, loader: 'babel-loader', include},
{test: /\.json$/, loader: 'json', include},
{test: /\.jpe?g$|\.gif$|\.png$/i, loader: "file-loader" },
]
plugins: [
new ExtractTextPlugin({ filename: 'style.css' }),
],
},
My code includes some CSS from node_modules like so
import React, { PropTypes } from 'react';
import Slider from 'rc-slider';
import 'rc-slider/assets/index.css';
import styles from '../css/SeekBar.css';
I'm importing the css file rc-slider/assets/index.css from the node_module rc-slider. This works in development with my Webpack config
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
include: [path.join(__dirname, '..', 'node_modules')],
},
However in my production config, this does not work
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
module: true,
localIdentName: '[path][name]__[local]___[hash:base64:5]',
},
},
{
loader: 'postcss-loader',
options: { plugins: postCSSConfig },
},
],
}),
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
include: [path.join(__dirname, '..', 'node_modules')],
},
The error is below
Child extract-text-webpack-plugin:
[0] ../~/css-loader?{"module":true,"localIdentName":"[path][name]__[local]___[hash:base64:5]"}!../~/postcss-loader?{}!../~/style-loader!../~/css-loader!../~/rc-slider/assets/index.css 988 bytes {0} [built] [failed] [1 error]
ERROR in ../~/css-loader?{"module":true,"localIdentName":"[path][name]__[local]___[hash:base64:5]"}!../~/postcss-loader?{}!../~/style-loader!../~/css-loader!../~/rc-slider/assets/index.css
Module build failed: Unknown word (5:1)
3 | // load the styles
4 | var content = require("!!./../../css-loader/index.js!./index.css");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
| ^
6 | // add the styles to the DOM
7 | var update = require("!./../../style-loader/addStyles.js")(content, {});
If I remove
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
include: [path.join(__dirname, '..', 'node_modules')],
},
from the production Webpack config, there's no errors, but the styles are not applied from rc-slider/assets/index.css.
Solved by doing
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[path][name]__[local]___[hash:base64:5]',
},
},
{
loader: 'postcss-loader',
options: { plugins: postCSSConfig },
},
],
}),
include: [path.join(__dirname, '..', 'app')],
exclude: [path.join(__dirname, '..', 'node_modules')],
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader'],
}),
include: [path.join(__dirname, '..', 'node_modules')],
exclude: [path.join(__dirname, '..', 'app')],
},
I am trying to use sass-loader to convert SCSS files to css(Required to have physical file). Styles are getting applied but unable to see generated .css files .
//webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/public',
filename: 'bundle.js'
},
devServer: {
contentBase: __dirname + '/public'
},
module: {
loaders: [
{test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
{test: /\.scss$/, loader: ExtractTextPlugin.extract('css-loader!sass-loader')}
]
},
plugins: [
new ExtractTextPlugin("style.css")
]
}
Full source code is available at github repo
I've seen the source code. I'm sure it's because of you're still using webpack version 1 syntax but what you installed was webpack v2. Webpack2 has a different syntax than the previous version.
Using webpack v2 your webpack.config.js will look like this:
module: {
rules: [ // from 'loaders' to 'rules'
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.sass$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: ['style-loader','sass-loader']
})
}
]
},
plugins: [
new ExtractTextPlugin('bundle.css') // what the output file (css) is going to be
]
Hope this helps.
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/'
}]