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;
Answer
Turns out order is important
...
use: [
"style-loader",
"css-loader",
"sass-loader"
]
...
See Question&Answers more detail:
os