Неожиданный маркер - 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') 

Run, который с вместо:

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

Добавлено в ваш проект:

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