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

【问题标题】：Unexpected token when @import -ing scss file into another scss file@import - 将 scss 文件放入另一个 scss 文件时出现意外标记
【发布时间】：2018-06-22 15:51:22
【问题描述】：

我有一个主 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 的新手，我在网上找到的所有教程都告诉我以这种方式导入文件。有什么问题？

【问题讨论】：

显示你的 webpack 配置
这是一个js错误。您没有对 babel 的测试，它会捕获所有内容并尝试将您的 scss 编译为 javascript。 test: /\.js$/
加载器也是 webpack 1，规则是 webpack 2+。移至规则并删除加载器
您能否更具体地说明“移至规则并删除加载程序”的含义？
如果您使用的是 webpack 4，请尝试从 extensions: ['', '.js', '.jsx', '.scss'] 中删除空字符串，这将导致错误......

标签： reactjs webpack sass

【解决方案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
    }
};

【讨论】：