reactjs - @import - 将 scss 文件放入另一个 scss 文件时出现意外标记

Question

我有一个主 style.scss 文件，它尝试将其他 .scss 文件导入到自身中。当我使用 npm start 编译代码时，出现此错误：

ERROR in ./style/style.scss
Module build failed: SyntaxError: C:/Users/XYZ/React/react-project/style/style.scss: 
Unexpected token, expected ( (1:8)

@import "_base";
        ^

我试过把它放在括号里：

@import("_base");

和

@import("_base.scss");

我得到这个错误：

ERROR in ./style/style.scss Module build failed: 
SyntaxError: C:/Users/XYZ/React/react-project/style/style.scss: 
Leading decorators must be attached to a class declaration (1:21)

> 1 | @import("_base.scss");
                           ^

这是我的 webpack.config.js：

module.exports = {
    entry: [
        './src/index.js'
    ],
    output: {
        path: __dirname,
        publicPath: '/',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['react', 'es2015', 'stage-1']
                }
            },
        ],
        rules: [{
            test: /\.scss$/,
            use: [
                "style-loader", // creates style nodes from JS strings
                "css-loader", // translates CSS into CommonJS
                "sass-loader" // compiles Sass to CSS
            ]
        }]
    },
    resolve: {
        extensions: ['', '.js', '.jsx', '.scss']
    },
    devServer: {
        historyApiFallback: true,
        contentBase: './',
        host: 'localhost',
        port: 8080
    }
};

我是 scss 的新手，我在网上找到的所有教程都告诉我以这种方式导入文件。有什么问题？

Answer 1

修复了问题 - 我迁移到 Webpack 2 并将我的 webpack.config.js 更改为：

module.exports = {
    entry: [
        './src/index.js'
    ],
    output: {
        path: __dirname,
        publicPath: '/',
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', ["es2015", { "modules": false }], 'stage-1']
                }
            },
            {
            test: /\.scss$/,
            use: [
                "style-loader", // creates style nodes from JS strings
                "css-loader", // translates CSS into CommonJS
                "sass-loader" // compiles Sass to CSS
            ]
        }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx', '.scss']
    },
    devServer: {
        historyApiFallback: true,
        contentBase: './',
        host: 'localhost',
        port: 8080
    }
};