Ребят, спасайте, второй день бьюсь над, видимо, какой-то тупой ошибкой. Webpack 5 никак не хочет подгружать css и scss файлы через import. Вот конфиги:
webpack:
const path = require('path')
const mode = process.env.NODE_ENV
const config = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, "dist"),
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.s[ac]ss$/i,
use: ['style-loader', 'css-loader', 'sass-loader'],
}
],
},
mode: mode == 'production' ? 'production' : 'development',
}
if(mode == 'development') {
config.devtools = 'eval-source-map'
}
module.export = config
package.json
{
"name": "svetamiru",
"version": "1.0.0",
"description": "Тема для wordpress",
"license": "MIT",
"private": true,
"scripts": {
"build": "export NODE_ENV=production; webpack",
"dev": "export NODE_ENV=development; webpack --watch"
},
"dependencies": {
"@fancyapps/ui": "^4.0.0-alpha.2",
"jquery": "^3.6.0",
"jquery-ui": "^1.12.1",
"util": "^0.12.4"
},
"devDependencies": {
"css-loader": "^5.2.6",
"sass-loader": "^12.1.0",
"sass": "^1.35.1",
"style-loader": "^3.0.0",
"webpack": "^5.40.0",
"webpack-cli": "^4.7.2"
}
}
И структура проекта:
Стили включаются в index.js вот так:
import "../../styles/reset.css"
import "../../styles/style.scss"
import "@fancyapps/ui/dist/fancybox.css"
При этом в трёх случаях webpack пишет одну и ту же ошибку, для каждого из css и scss файлов:
ERROR in ../styles/style.scss 13:0
Module parse failed: Unexpected character '@' (13:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
И если я включаю загрузчики внутри import'а вот так, как это можно делать в 5м webpack'e, то это работает и ошибки нет:
import "!style-loader!css-loader?modules!../../styles/reset.css"
import "!style-loader!css-loader?modules!sass-loader!../../styles/style.scss"
import "!style-loader!css-loader?modules!@fancyapps/ui/dist/fancybox.css"
Похоже что загрузчики из конфига просто не работают... есть идеи?
Средний