@dikium

Почему Webpack никак не видит загрузчики из конфига?

Ребят, спасайте, второй день бьюсь над, видимо, какой-то тупой ошибкой. 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"
  }
}


И структура проекта:
60d7664a2497d885566980.png

Стили включаются в 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"


Похоже что загрузчики из конфига просто не работают... есть идеи?
  • Вопрос задан
  • 35 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы