Можете помочь с настройкой webpack?

Доброго времени суток.

По одному из курсу настраиваю webpack и на одном моменте происходит затык. Не могу понять в чем проблема, прошу помощи.

Вот сам webpack.config.js

const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require("copy-webpack-plugin")
const MiniCssExtractPlugin = require('mini-css-extract-plugin')


module.exports = {
    context: path.resolve(__dirname, 'src'),
    mode: 'development',
    entry: './index.js',
    output: {
        filename: 'bundle.[hash].js',
        path: path.resolve(__dirname, 'dist')
    },
    resolve: {
        extensions: ['.js'],
        alias: {
            '@': path.resolve(__dirname, 'src'),
            '@core': path.resolve(__dirname, 'src/core')
        }
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
            template: 'index.html'
        }),
        new CopyPlugin({
            patterns: [
                {
                    from: path.resolve(__dirname, 'src/favicon.ico'),
                    to: path.resolve(__dirname, 'dist')
                }
            ]
        }),
        new MiniCssExtractPlugin({
            filename: 'bundle.[hash].css'
        })
    ],
    module: {
        rules: [
            {
                test: /\.s[as]ss$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
}



Вот index.scss на который якобы webpack ругается

$red: blue;

body {
  background: $red;
}



Вот index.js в который я импортирую scss файл

import './module'
import './scss/index.scss'

console.log('Working!')



На всякий случай вот package.json

{
  "name": "excel-course",
  "version": "1.0.0",
  "description": "Pure Javascript Excel Application",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "build": "webpack --mode production"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/romantonkoshkurov93/excel-course.git"
  },
  "keywords": [
    "js",
    "javascript",
    "excel"
  ],
  "author": "Roman Tonkoshkurov <romantonkoshkurov@gmail.com>",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/romantonkoshkurov93/excel-course/issues"
  },
  "homepage": "https://github.com/romantonkoshkurov93/excel-course#readme",
  "private": true,
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^7.0.0",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^4.5.1",
    "mini-css-extract-plugin": "^1.3.3",
    "sass": "^1.32.2",
    "sass-loader": "^10.1.0",
    "webpack": "^5.11.1",
    "webpack-cli": "^4.3.1"
  }
}



и вот при старте
npm run start
webpack ругается. Ниже ошибка.
ERROR in ./scss/index.scss 3:5
Module parse failed: Unexpected token (3:5)
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
| $red: blue;
|
> body {
|   background: $red;
| }
 @ ./index.js 2:0-27

webpack 5.11.1 compiled with 1 error in 819 ms
  • Вопрос задан
  • 90 просмотров
Решения вопроса 2
У вас вот эта регулярка test: /\.s[as]ss$/i никогда не сработает на scss
Ответ написан
@lnked
для начала исправьте регулярку c test: /\.s[as]ss$/i, на test: /\.s?(a|c)?ss$/,
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@roman_tonkoshkurov Автор вопроса
Точно, спасибо народ. Регулярные пока вообще не знаю и не обратил на это внимание.

И плохо, что ошибка указывается не явно на то, что не может scss файл найти.

Всем большое спасибо.
Ответ написан
Ваш ответ на вопрос

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

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