Модуль не найден: ошибка: не удается разрешить файл "./style.css" в каталоге?
Я пытаюсь запустить команду npm run build
Но это не работает. и я получаю ошибку ниже:
> typescript@1.0.0 build /Users/Prashant/Code/typescript
> webpack
Hash: c6dbd1eb3357da70ca81
Version: webpack 3.2.0
Time: 477ms
Asset Size Chunks Chunk Names
bundle.js 2.89 kB 0 [emitted] main
[0] ./src/index.js 51 bytes {0} [built]
[1] ./src/index.css 290 bytes {0} [built] [failed] [1 error]
ERROR in ./src/index.css
Module build failed: Unknown word (5:1)
3 | // load the styles
4 | var content = require("!!./index.css");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
| ^
6 | // Prepare cssTransformation
7 | var transform;
8 |
@ ./src/index.js 1:0-22
Файл конфигурации моего веб-пакета (webpack.config.js):
var path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'css-loader',
'style-loader'
]
}
]
}
};
И мой файл CSS (index.css)
body {
color:red;
}
и мой файл js index.js ниже:
require("./index.css");
alert('this is my alert');
Я пытаюсь запустить файл, но он не работает. Я проверил все правописания, также попробуйте добавить много другого CSS, но он не работает, не могли бы вы помочь мне, как я могу решить эту проблему?
2 ответа
Загрузчики применяются в обратном порядке. Это означает, что вы подаете заявление style-loader
сначала, а затем передать его результат css-loader
, Выход из style-loader
JavaScript, который вставит стили в <style>
тег, но css-loader
ожидает CSS и не в состоянии анализировать JavaScript, так как это недопустимый CSS.
Правильное правило:
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
Я решил это, просто создав файл style.css из того же каталога моего файла js.
У меня возникла та же проблема, и я обнаружил, что в конфигурации веб-пакета есть второе правило модуля, обрабатывающее файлы *.css.