css - SASS-Loader无法正确解析SCSS文件

Question

我正在尝试更新较旧的NPM / Node代码库，以便在运行npm run build时可以正确编译东西，而我在解决此问题时会吐出大量与scss相关的问题。

错误消息：You may need an additional loader to handle the result of these loaders

完整的错误消息：

ERROR in ./src/containers/App/styles/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleParseError: Module parse failed: Unexpected character '@' (5:0)
File was processed with these loaders:
 * ./node_modules/sass-loader/lib/loader.js
You may need an additional loader to handle the result of these loaders.
|   Fonts
| */
> @font-face {
|   font-family: 'Roboto';
|   src: url(//fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap&subset=cyrillic-ex) format("truetype"); }
    at handleParseError (/var/www/FlaskApp/people-app/static/node_modules/webpack/lib/NormalModule.js:450:19)
    at doBuild.err (/var/www/FlaskApp/people-app/static/node_modules/webpack/lib/NormalModule.js:484:5)
    at runLoaders (/var/www/FlaskApp/people-app/static/node_modules/webpack/lib/NormalModule.js:343:12)
    at /var/www/FlaskApp/people-app/static/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/var/www/FlaskApp/people-app/static/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/var/www/FlaskApp/people-app/static/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /var/www/FlaskApp/people-app/static/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at context.callback (/var/www/FlaskApp/people-app/static/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.render [as callback] (/var/www/FlaskApp/people-app/static/node_modules/sass-loader/lib/loader.js:76:9)
    at Object.done [as callback] (/var/www/FlaskApp/people-app/static/node_modules/neo-async/async.js:8067:18)
    at options.success (/var/www/FlaskApp/people-app/static/node_modules/node-sass/lib/index.js:308:32)
 @ ./src/containers/App/index.js 40:0-28
 @ ./src/index.js
 @ multi bootstrap-loader ./src/index ./src

app.scss：

/* global styles */
@import 'fonts/roboto';
@import 'typography';
@import 'links';

:global(body) {
  position: relative;
  font-family: 'Roboto', sans-serif !important;
  h1, h2, h3, h4 {
    font-weight: 300;
  }

}

:global(.addIconDiv) {
    position: relative;
    display: inline-block;
}
:global(.addIconSpinner) {
    position: absolute; 
    top: -6px;
    left: -6px;
}
:global(.editIconSpinner) {
    position: absolute; 
    top: 50%;
    left: 45%;
    margin-top: -12px;
    margin-left: -12px;
}

roboto.scss：

@font-face {
    font-family: 'Roboto';
    src: url(//fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap&subset=cyrillic-ex) format('truetype')
}

webpack dev.config.js：

const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const autoprefixer = require('autoprefixer');
const postcssImport = require('postcss-import');

module.exports = {
    mode: 'development',
    devtool: 'cheap-module-eval-source-map',
    entry: [
        'bootstrap-loader',
        'webpack-hot-middleware/client',
        './src/index',
    ],
    output: {
        publicPath: '/dist/',
    },

    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            // you can specify a publicPath here
                            // by default it uses publicPath in webpackOptions.output
                            publicPath: '../',
                            hmr: process.env.NODE_ENV === 'development',
                        },
                    },
                    'sass-loader',
                ],
            },
        ],
    },

    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"development"',
            },
            __DEVELOPMENT__: true,
        }),
        new MiniCssExtractPlugin({
            filename: 'bundle.css',
        }),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),     //no pings back to webpack "_hrm"
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
        }),
    ],
};

npm-debug.log

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'build' ]
2 info using npm@3.5.2
3 info using node@v8.10.0
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle redux-easy-boilerplate@1.3.3~prebuild: redux-easy-boilerplate@1.3.3
6 silly lifecycle redux-easy-boilerplate@1.3.3~prebuild: no script for prebuild, continuing
7 info lifecycle redux-easy-boilerplate@1.3.3~build: redux-easy-boilerplate@1.3.3
8 verbose lifecycle redux-easy-boilerplate@1.3.3~build: unsafe-perm in lifecycle true
9 verbose lifecycle redux-easy-boilerplate@1.3.3~build: PATH: /usr/share/npm/bin/node-gyp-bin:/var/www/FlaskApp/people-app/static/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/snap/bin
10 verbose lifecycle redux-easy-boilerplate@1.3.3~build: CWD: /var/www/FlaskApp/people-app/static
11 silly lifecycle redux-easy-boilerplate@1.3.3~build: Args: [ '-c',
11 silly lifecycle   'webpack --progress --verbose --colors --display-error-details --config webpack/common.config.js' ]
12 silly lifecycle redux-easy-boilerplate@1.3.3~build: Returned: code: 2  signal: null
13 info lifecycle redux-easy-boilerplate@1.3.3~build: Failed to exec build script
14 verbose stack Error: redux-easy-boilerplate@1.3.3 build: `webpack --progress --verbose --colors --display-error-details --config webpack/common.config.js`
14 verbose stack Exit status 2
14 verbose stack     at EventEmitter.<anonymous> (/usr/share/npm/lib/utils/lifecycle.js:232:16)
14 verbose stack     at emitTwo (events.js:126:13)
14 verbose stack     at EventEmitter.emit (events.js:214:7)
14 verbose stack     at ChildProcess.<anonymous> (/usr/share/npm/lib/utils/spawn.js:24:14)
14 verbose stack     at emitTwo (events.js:126:13)
14 verbose stack     at ChildProcess.emit (events.js:214:7)
14 verbose stack     at maybeClose (internal/child_process.js:925:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
15 verbose pkgid redux-easy-boilerplate@1.3.3
16 verbose cwd /var/www/FlaskApp/people-app/static
17 error Linux 4.15.0-51-generic
18 error argv "/usr/bin/node" "/usr/bin/npm" "run" "build"
19 error node v8.10.0
20 error npm  v3.5.2
21 error code ELIFECYCLE
22 error redux-easy-boilerplate@1.3.3 build: `webpack --progress --verbose --colors --display-error-details --config webpack/common.config.js`
22 error Exit status 2
23 error Failed at the redux-easy-boilerplate@1.3.3 build script 'webpack --progress --verbose --colors --display-error-details --config webpack/common.config.js'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the redux-easy-boilerplate package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     webpack --progress --verbose --colors --display-error-details --config webpack/common.config.js
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs redux-easy-boilerplate
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls redux-easy-boilerplate
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

Answer 1

尝试此配置以查看是否有效

{
    test: /\.scss$/,
    use: [
        'style-loader',
        MiniCssExtractPlugin.loader,
        {
            loader: "css-loader",
            options: {
                minimize: true,
                sourceMap: true
            }
        },
        {
            loader: "sass-loader"
        }
    ]
}