webpack does not work for me when trying to add css using the css-loader.
os: Windows 10 pro, webpack: 4.8.0 node: 8.9.4 npm: 6.0.0 css-loader: 0.28.11 style-loader: 0.21.0
package.json
{
"name": "webpack-dev",
"version": "1.0.0",
"description": "",
"main": "index.php",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "./src/app.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.11",
"node-sass": "^4.9.0",
"raw-loader": "^0.5.1",
"sass-loader": "^7.0.1",
"style-loader": "^0.21.0",
"url-loader": "^1.0.1",
"webpack": "^4.8.1",
"webpack-cli": "^2.1.3"
}
}
app.js
require('./style.css');
require('./scripts.js');
Error Message
Version: webpack 4.8.1
Time: 2157ms
Built at: 2018-05-09 14:13:17
Asset Size Chunks Chunk Names
bundle.js 3.68 KiB main [emitted] main
Entrypoint main = bundle.js
[./src/app.js] 48 bytes {main} [built]
[./src/scripts.js] 28 bytes {main} [built]
[./src/style.css] 222 bytes {main} [built] [failed] [1 error]
ERROR in ./src/style.css
Module build failed: Unknown word (2:1)
1 |
> 2 | var content = require("!!./style.css");
| ^
3 |
4 | if(typeof content === 'string') content = [[module.id, content, '']];
5 |
@ ./src/app.js 1:0-22
style.css
body {
color: red;
}
I just use the command webpack
and it fails every time. This is the most frustrating tool ever. Nothing works except for if I put !!
in front of the require statement i.e. require(!!'./style.css')
I have read every bug report about this I can find on npm, stackoverflow, etc., etc. but nothing seems to point to my problem. I literally followed the instructions verbatim from the modules section of webpack and it still isn't working. PLEASE HELP!
edit: forgot the config file
const webpack = require('webpack')
const path = require('path')
const config = {
entry: './src/app.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
mode: 'development',
module: {
rules: [
{
test: /\.(s*)css$/,
use: [
'sass-loader',
'css-loader',
'style-loader'
]
},
{
test: /\.js$/,
exclude: /(node_modules)/,
use: [
'babel-loader'
]
},
{
test: /\.(png|svg|jpg)$/,
use: [
'file-loader'
]
}
]
}
};
module.exports = config;
Turns out order is important
...
use: [
"style-loader",
"css-loader",
"sass-loader"
]
...
In webpack, when you list multiple loaders within a rule, they are evaluated from right to left (in your case, bottom to top), so your scss rule should be:
{
test: /\.(s*)css$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}
The reason is that first, you want your sass to compile to css, and then the css will be inlined in your html file via the style-loader.
Also, if you are not using sass, you can remove the sass-loader.
Have check these issues getting similar issues in my web pack project You have to check the web pack rule :
{
test: /\.(s*)css$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}
Above, updated the rule it will handle our sass or CSS files. The test is test: /.(s*)css$/ : which means any file having name matching with regular expression /.(s*)css$/i.e. .scss or .css
It should be compiled with the chain of loaders specified in the use array i.e. ['style-loader', 'css-loader', 'sass-loader'].
This rule chain the output of sass-loader to css-loader. css-loader will take this css output of sass-loader and will also process any other .css files we have in our application and pass on the .css to style-loader, which will then do the job of putting the css codes inside tags in our index.html,It work bottom to top..
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With