Почему мой webpack.config.js не компилирует CSS-файлы?

Question

Я делаю аппликацию в фалконе.Я хотел бы использовать scss, vue для своих активов и скомпилировать их, используя webpack 4, где я новичок.Я нашел плагин minicssextract, который компилирует CSS-файлы, но я не понимаю, почему он не может найти подходящий тип.Вот моя конфигурация:

let path = require('path');
let webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const devMode = process.env.NODE_ENV !== 'production';

module.exports = {
   entry: [
       './resources/js/app.js',
       './resources/scss/app.sсss'
   ],
   output: {
       path          : path.resolve(__dirname, './public/oauth/js'),
       publicPath    : '/oauth/js/',
       filename      : 'app.js',
   },
   devtool: "source-map",
   resolve: {
       alias: {
            'vue$': 'vue/dist/vue.esm.js'
       },
       extensions: ['*', '.js', '.vue', '.json']
   },
   module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: file => (
                     /node_modules/.test(file) &&
                     !/\.vue\.js/.test(file)
                )
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader',
                ],
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: devMode ? '[name].css' : '[name].[hash].css',
            chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
        }),
        new VueLoaderPlugin()
    ]
};

Но она показывает следующие ошибки:

ОШИБКА в ./resources/scss/app.sсss 1: 2 Ошибка синтаксического анализа модуля: неожиданный токен(1: 2) Вам может понадобиться соответствующий загрузчик для обработки этого типа файлов.h1{ | color: red; | } @ multi ./resources/js/app.js ./resources/scss/app.sсss main [1]

Answer 1

Вот минимальная настройка, с которой можно начать.Вы можете добавлять функции шаг за шагом и посмотреть, когда это пойдет не так!Я буду рад помочь, если что-то пойдет не так.

Версии пакета: webpack (4.29.0) / node-sass (4.11.0) / sass-loader (7.1.0)

webpack.config.js

const HtmlPlugin = require('html-webpack-plugin')
const CleanPlugin = require('clean-webpack-plugin')
const MiniCssPlugin = require('mini-css-extract-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  mode: 'development',
  entry: ['./src/index.js', './src/index.scss'],
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.scss$/,
        //use: ['style-loader', 'css-loader', 'sass-loader']
        use: [MiniCssPlugin.loader, 'css-loader', 'sass-loader'],
      },
    ],
  },
  plugins:[
    new CleanPlugin('dist'),
    new HtmlPlugin(),
    new MiniCssPlugin(),
    new VueLoaderPlugin()
  ]
}

. / Src / index.js

var title = document.createElement('h1')
title.innerHTML = 'Hello World'
document.body.appendChild(title)

. / Src /index.scss

$color: crimson;
h1 {
  background: $color;
  padding: 15px - 10;
}