Question

由于某些原因，我的yarn run dev命令由于以下原因而失败：

SyntaxError: /src/components/home/index.scss:Unexpected token (1:0)
> 1 | .home {
...

我正在使用webpack 2.2.0，其设置如下：

module: {
    rules: [
        {
            test: /\.(js|jsx)$/,
            use: 'babel-loader',
            include: path.resolve(__dirname, 'src'),
        }, {
            test: /\.(scss)/,
            include: path.resolve(__dirname, 'src'),
            use: [
                'style-loader',
                'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]__[hash:base64:5]',
                'sass-loader',
                {
                    loader: 'postcss-loader',
                    options: {
                        plugins: function () {
                            return [
                                require('autoprefixer')
                            ]
                        }
                    }
                }
            ],
            include: path.resolve(__dirname, 'src')
        }
    ]
}

我在index.js组件中所做的一切都是import s from './styles.scss'。如果我删除了import语句并允许应用程序启动，然后在应用程序运行时重新放入import语句并刷新页面，那么样式就会出现......我觉得这很奇怪并且之前没有遇到过这个问题...

Answer 1

thread解释了您收到此错误的原因：

我想我发现为什么它首先不起作用。虽然Webpack允许在客户端需要静态资产，但编译服务器代码的babel却没有这样做，因为在服务器端，Node要求只能理解JS文件。这意味着使用默认Webpack和babel无法进行服务器端呈现。

有几种解决方案可以解决这个问题，或多或少都很复杂。

最简单的一种方法是忽略服务器上的.scss：

我在项目中添加了一个run-server.js文件

require('babel-core/register')({
  presets: ['es2015-node5', 'stage-0'],
  plugins: ['transform-decorators-legacy'] //was needed to support decorators
})

require.extensions['.scss'] = () => {
  return;
}

require.extensions['.css'] = () => {
  return;
}

require('./server')

改为运行：

"cross-env NODE_ENV=development node ./run-server.js"

已添加到您的项目中：

npm install babel-preset-es2015-node5 babel-plugin-transform-decorators-legacy -D

意外的令牌 - Webpack 2.2.0和SCSS

1 个答案: