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' }),
],
},
Related
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 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.
So i have been using webpack with loaders. Today i wanted to add a prefixer loader to css and i keep getting error at webpack dev server run that "cannot resolve module postcss" here is the code:
module: {
loaders: [
{test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
{test: /\.css$/, loader: 'style!css?{"sourceMap&modules&localIdentName": "[name]__[local]___[hash:base64:5]", "modules&importLoader": "1!postcss"}'}
]
},
postcss: [ autoprefixer({ browsers: ['last 2 versions'] }) ]
before this i had been using just the below code and my webpack run dev server command ran without error.
module: {
loaders: [
{test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
{test: /\.css$/, loader: 'style!css?sourceMap&modules&localIdentName=[name]__[local]___[hash:base64:5]'}
]
}
what am i doing wrong?
solved it:
module: {
loaders: [
{test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
{test: /\.css$/, loader: 'style!css?sourceMap&modules&localIdentName=[name]__[local]___[hash:base64:5]&importLoader=1!postcss'}
]
},
postcss: [ autoprefixer({ browsers: ['last 2 versions'] }) ]
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/'
}]
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"
}