Webpack在SCSS @import SCSS上抛出错误

Question

我试图在Webpack (3.6.0)中将多个SCSS文件处理成一个外部CSS文件，但我在解析@import语句时遇到了一些问题。

条目index.js包含：

import './styles/main.scss';

参赛SCSS：

@import 'reset.scss';
@import 'global.scss';
@import 'fonts.scss';
@import 'system.scss';

现任webpack：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    entry: {
        app: './src/index.js'
    },
    context: path.resolve(__dirname),

    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js',
    },

    plugins: [
        new CleanWebpackPlugin(['app']),
        new HtmlWebpackPlugin({
            title: 'Minimum-Viable',
            filename: 'index.html',
            template: './public/index.html',
        }),
    ],

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            'es2015',
                            'react',
                        ],
                        plugins: ['transform-class-properties'],
                    },
                },
            },
            {
                test: /\.scss$/,
                include: [
                    path.resolve(__dirname, 'styles')
                ],
                use: [
                    {loader:'style-loader'},
                    {loader:'css-loader'},
                    {loader:'sass-loader'}
                ]
            },
        ],
    },
    resolve: {
        extensions: ['.js','.scss']
    }
};

引发的错误是：

错误在./src/样式/main.scss模块解析失败:意外字符'@‘(1:0) 您可能需要一个适当的加载程序来处理此文件类型。@import 'reset.scss'；

任何指针都会感激地收到。

Answer 1

我设法复制了错误，它似乎来自：

include: [
    path.resolve(__dirname, 'styles')
],

路径是问题所在，加载程序在/styles中搜索./styles，但查看入口点：

entry: {
    app: './src/index.js'
},

实际上应该是./src/styles，所以：

include: [
    path.resolve(__dirname, 'src', 'styles')
],

Answer 2

通过以下方式：

include: [
    path.resolve(__dirname, 'styles')
],

您正在指示webpack只对驻留在您的styles文件夹中的文件使用加载程序链。

reset.scss看起来像一个节点依赖项，通常存储在node_module中，include选项将它排除在SASS处理之外。

尝试删除SASS include选项或扩展它，以便包括node_folder或样式导入的特定模块。

Answer 3

我的配置基本上与您相同，除了两件事：

{
  test: /\.scss$/,
  exclude: /node_modules/,
  use: ["style-loader", "css-loader", "sass-loader"]
}

如果您的webpack位于与您的项目根不同的文件夹中，__dirname可能不会适合您。您可能需要将该语句全部删除，或者将其更改为process.cwd()。我可以给您另一个提示，这可能是您丢失了node-sass包。其次，您可能没有对webpack版本2或3使用正确的语法，如use键所示。