意外标记 - 的WebPack 2.2.0和SCSS

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解释了为什么您收到此错误的原因：

I think I found out why it didn't work on the first place. Though Webpack allows requiring static assets on the client side, babel, which compiles the server code, fails to do so as on the server side Node's require understands only JS files. This means that server side rendering is not possible with the default Webpack and babel.

有几种解决方案来解决这个问题，或多或少复杂到位。

最简单的一个，是在服务器上忽略.scss像这样：

我添加了一个运行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