Webpack 在 SCSS @import SCSS 上抛出错误

Question

我正在尝试将多个 SCSS 文件处理成 Webpack (3.6.0) 中的单个外部 CSS 文件，但我在解析 @import 语句时遇到问题.

条目 index.js 包含：

import './styles/main.scss';

条目 SCSS:

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

当前的网络包：

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']
    }
};

抛出的错误是：

ERROR in ./src/styles/main.scss Module parse failed: Unexpected character '@' (1:0)

You may need an appropriate loader to handle this file type. | @import 'reset.scss';

不胜感激。

Answer 1

我的配置基本上和你一样，除了两点：

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

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

Answer 2

与：

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

您正在指示 webpack 仅对位于 styles 文件夹中的文件使用您的加载程序链。

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

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

Answer 3

你试过这种方法吗？

index.js:

import './styles/main.scss';
import './styles/reset.scss';
import './styles/global.scss';
import './styles/fonts.scss';
import './styles/system.scss';

Answer 4

你试过吗提取文本webpack插件

https://github.com/webpack-contrib/extract-text-webpack-plugin

基本上它会收集您所有的样式文件（在您的代码中导入）并将其打包到捆绑的 css 中，然后您可以 link 到您的 html.

Answer 5

我设法重现了错误，它似乎来自：

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

路径是导致加载程序在 ./styles 中搜索 /styles 但查看您的入口点的问题：

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

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

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

Webpack 在 SCSS @import SCSS 上抛出错误

Webpack throwing error on SCSS @import SCSS

css

sass

webpack

webpack-2