CKEditor和Webpack：缺少装载程序

我正在尝试按照本指南将CKEditor5添加到我的网站：https://docs.ckeditor.com/ckeditor5/latest/framework/guides/quick-start.html

我已经完成了它告诉我添加加载器的步骤 . 我没有改变指南告诉你添加到yourwebpack配置的内容 .

这是我的完整webpack配置：

'use strict';

var webpack = require('webpack'),
    path = require('path'),
    glob = require('glob'),
    ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

var pageEntryArray = glob.sync('./assets/scripts/views/**/*.ts');
var pageEntries = {};
pageEntryArray.forEach(function (item) {
    var ext = path.extname(item);
    var filename = path.basename(item, ext);
    pageEntries[filename] = item;
});

var otherEntries = {
    'init': ['babel-polyfill', 'whatwg-fetch', 'element-closest', './assets/scripts/init.ts'],
}

var entries = Object.assign({}, otherEntries, pageEntries);

var cacheLoader = {
    loader: 'cache-loader'
};

var threadLoader = {
    loader: 'thread-loader',
    options: {
        // there should be 1 cpu for the fork-ts-checker-webpack-plugin
        workers: require('os').cpus().length - 1,
    }
};

var babelLoader = {
    loader: 'babel-loader',
    options: {
        cacheDirectory: true,
        presets: ["es2015", "es2016"]
    }
};

var config = {
    entry: entries,
    output: {
        path: path.resolve(__dirname, './wwwroot/js'),
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                test: /\.ts(x?)$/,
                exclude: /node_modules/,
                use: [
                    cacheLoader,
                    threadLoader,
                    babelLoader,
                    {
                        loader: 'ts-loader',
                        options: {
                            happyPackMode: true
                        }
                    }
                ]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    cacheLoader,
                    threadLoader,
                    babelLoader,
                ]
            },
            {
                test: /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/,
                use: ['raw-loader']
            },
            {
                test: /ckeditor5-[^/]+\/theme\/[^/]+\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    plugins: [
        new ForkTsCheckerWebpackPlugin({
            checkSyntacticErrors: true,
            tslint: false
        }),
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery'
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common',
            filename: 'common.js',
            minChunks: 2
        })
    ]
};

module.exports = config;

正如您所看到的，我已经为.scss文件和.svg文件添加了加载程序，但是，当我尝试运行webpack时，我收到以下错误：

ERROR in ./node_modules/@ckeditor/ckeditor5-editor-classic/theme/theme.scss
Module parse failed: Unexpected character '@' (4:0)
You may need an appropriate loader to handle this file type.
| // For licensing, see LICENSE.md or http://ckeditor.com/license
| 
| @import '~@ckeditor/ckeditor5-theme-lark/theme/theme.scss';
| 
| .ck-editor {
 @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditor.js 16:0-29
 @ ./assets/scripts/views/project-message/project-message-send.ts

ERROR in ./node_modules/@ckeditor/ckeditor5-undo/theme/icons/redo.svg
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 16l1-3.982c-3.417 0-8.616.869-10 3.982 0-5.983 6.601-7.96 10-7.96 0-.85-1-3.32-1-4.04l8 6-8 6z" fill="#454545" fill-rule="evenodd"/></svg>
 @ ./node_modules/@ckeditor/ckeditor5-undo/src/undo.js 15:0-47
 @ ./node_modules/@ckeditor/ckeditor5-essentials/src/essentials.js
 @ ./assets/scripts/views/project-message/project-message-send.ts

ERROR in ./node_modules/@ckeditor/ckeditor5-basic-styles/theme/icons/italic.svg
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M13.825 3.914l-.126.558a5.701 5.701 0 0 0-.685.076c-.282.045-.49.088-.626.127-.237.073-.406.186-.508.338a1.586 1.586 0 0 0-.22.5l-2.03 8.769a1.24 1.24 0 0 0-.034.27c.001.13.03.24.086.33.056.09.157.17.304.237.085.04.27.086.558.14.288.053.502.086.643.097l-.127.558H5.656l.127-.558.677-.05c.293-.023.501-.057.625-.102a1.11 1.11 0 0 0 .5-.326c.112-.138.188-.306.228-.503l2.02-8.778a1.428 1.428 0 0 0 .035-.305.59.59 0 0 0-.072-.295c-.048-.085-.148-.161-.3-.229a3.457 3.457 0 0 0-.622-.19 5.001 5.001 0 0 0-.58-.106l.128-.558h5.403z" fill="#454545" fill-rule="evenodd"/></svg>
 @ ./node_modules/@ckeditor/ckeditor5-basic-styles/src/italic.js 13:0-51
 @ ./assets/scripts/views/project-message/project-message-send.ts

ERROR in ./node_modules/@ckeditor/ckeditor5-basic-styles/theme/icons/bold.svg
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M15.135 10.409c.361.248.654.56.88.934.225.375.338.816.338 1.324 0 .609-.128 1.123-.385 1.543-.256.42-.624.751-1.103.994a5.908 5.908 0 0 1-1.755.55c-.663.107-1.442.16-2.338.16H4.539v-.66a22.5 22.5 0 0 0 .66-.076c.265-.033.45-.073.558-.118.208-.085.35-.196.427-.334.076-.138.114-.317.114-.537V5.732c0-.203-.031-.372-.093-.507s-.211-.254-.448-.355a3.326 3.326 0 0 0-.61-.182 14.136 14.136 0 0 0-.608-.114v-.66h6.52c1.64 0 2.825.226 3.552.677.727.45 1.09 1.116 1.09 1.995 0 .406-.08.763-.244 1.07a2.388 2.388 0 0 1-.702.8 4.214 4.214 0 0 1-.99.54c-.383.153-.795.28-1.234.381v.16c.44.046.896.143 1.37.292.473.15.885.343 1.234.58zm-2.723-3.611c0-.665-.187-1.184-.562-1.556-.375-.372-.937-.558-1.687-.558-.107 0-.247.004-.419.012l-.444.021v4.449h.44c.913 0 1.587-.213 2.021-.639.434-.425.651-1.002.651-1.73zm.592 5.759c0-.835-.248-1.475-.744-1.92-.496-.445-1.21-.668-2.14-.668a22.977 22.977 0 0 0-.82.034v4.389c.05.208.209.385.474.528.265.144.586.216.964.216.67 0 1.216-.225 1.636-.676.42-.452.63-1.086.63-1.903z" fill="#454545" fill-rule="evenodd"/></svg>
 @ ./node_modules/@ckeditor/ckeditor5-basic-styles/src/bold.js 13:0-47
 @ ./assets/scripts/views/project-message/project-message-send.ts

ERROR in ./node_modules/@ckeditor/ckeditor5-undo/theme/icons/undo.svg
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10l8 6-1-3.982c3.417 0 8.616.869 10 3.982 0-5.983-6.601-7.96-10-7.96 0-.85 1-3.32 1-4.04l-8 6z" fill="#454545" fill-rule="evenodd"/></svg>
 @ ./node_modules/@ckeditor/ckeditor5-undo/src/undo.js 14:0-47
 @ ./node_modules/@ckeditor/ckeditor5-essentials/src/essentials.js
 @ ./assets/scripts/views/project-message/project-message-send.ts
[11:33:35] Finished 'scripts' after 17 s
Process terminated with code 0.

这是我的package.json：

{
    "version": "1.0.0",
    "name": "crm.einionmedia.com",
    "private": true,
    "devDependencies": {
        "@types/bootstrap": "^3.3.36",
        "@types/chart.js": "^2.6.2",
        "@types/eonasdan-bootstrap-datetimepicker": "^4.17.25",
        "@types/flatpickr": "^3.0.2",
        "@types/jquery": "^3.2.10",
        "@types/knockout": "^3.4.44",
        "@types/lodash.flattendeep": "^4.4.2",
        "@types/lodash.groupby": "^4.6.3",
        "@types/lodash.merge": "^4.6.2",
        "@types/lodash.orderby": "^4.6.2",
        "@types/numeral": "^0.0.21",
        "@types/select2": "^4.0.38",
        "@types/sortablejs": "^1.3.31",
        "@types/virtual-dom": "^2.0.27",
        "babel-core": "^6.25.0",
        "babel-loader": "^7.1.1",
        "babel-polyfill": "^6.23.0",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-es2016": "^6.24.1",
        "bootstrap": "^3.3.7",
        "cache-loader": "^1.0.3",
        "chart.js": "^2.6.0",
        "choices.js": "^3.0.2",
        "ckeditor": "^4.7.3",
        "del": "^3.0.0",
        "element-closest": "^2.0.2",
        "eonasdan-bootstrap-datetimepicker": "^4.17.46",
        "fine-uploader": "^5.15.0",
        "flatpickr": "^3.0.2",
        "font-awesome": "^4.7.0",
        "fork-ts-checker-notifier-webpack-plugin": "^0.2.0",
        "fork-ts-checker-webpack-plugin": "^0.2.8",
        "glob": "^7.1.2",
        "gulp": "^3.9.1",
        "gulp-clean-css": "^3.7.0",
        "gulp-cli": "^1.3.0",
        "gulp-concat": "^2.6.1",
        "gulp-imagemin": "^3.3.0",
        "gulp-sass": "^3.1.0",
        "gulp-util": "^3.0.8",
        "imagemin-pngquant": "^5.0.1",
        "inputmask": "^3.3.8",
        "jquery": "^3.2.1",
        "knockout": "^3.4.2",
        "lodash.flattendeep": "^4.4.0",
        "lodash.groupby": "^4.6.0",
        "lodash.merge": "^4.6.0",
        "lodash.orderby": "^4.6.0",
        "moment": "^2.18.1",
        "numeral": "^2.0.6",
        "path": "^0.12.7",
        "select2": "^4.0.3",
        "sortablejs": "^1.6.0",
        "thread-loader": "^1.1.1",
        "ts-loader": "^2.3.2",
        "typescript": "^2.4.2",
        "virtual-dom": "^2.1.1",
        "webpack": "^3.8.1",
        "webpack-notifier": "^1.5.0",
        "whatwg-fetch": "^2.0.3"
    },
    "dependencies": {
        "@ckeditor/ckeditor5-basic-styles": "^1.0.0-alpha.1",
        "@ckeditor/ckeditor5-editor-classic": "^1.0.0-alpha.1",
        "@ckeditor/ckeditor5-essentials": "^1.0.0-alpha.1",
        "@ckeditor/ckeditor5-paragraph": "^1.0.0-alpha.1",
        "css-loader": "^0.28.7",
        "node-sass": "^4.6.0",
        "raw-loader": "^0.5.1",
        "sass-loader": "^6.0.6",
        "style-loader": "^0.19.0"
    }
}

为什么Webpack不使用我在配置文件中添加的加载器？提前致谢 .