Question

我正在尝试使用scss和cssmodule使用react和ssr开发一个简单的应用程序。当我构建webpack --config ./webpack.config.dev.js时，一切正常，我没有看到任何错误，并且可以看到构建的文件，但是当我尝试使用npm run start运行应用程序时，start是：

start: NODE_ENV=development babel-node ./server.js

我明白了：

/ssr/node_modules/babel-core/lib/transformation/file/index.js:558
  throw err;
  ^

SyntaxError 
/src/components/header/styles.scss: Unexpected token (1:0) 
    .header { ... }

这是我的webpack配置，但我不确定这是问题所在...

const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: [
        'webpack-hot-middleware/client',
        path.resolve(__dirname, 'src')
    ],
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js',
        publicPath: '/'
    },
    plugins: [
        new ExtractTextPlugin('bundle.css'),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('development'),
                WEBPACK: true
            }
    })
    ],
    module: {
        loaders: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    query: {
                        presets: [ 'react-hmre' ]
                    }
                },
                include: path.resolve(__dirname, 'src')
            },
            {
                test: /\.scss/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
            {
              loader: 'css-loader',
              options: {
                modules: true,
                importLoaders: 1,
                localIdentName: '[name]_[local]_[hash:base64]',
                sourceMap: true,
                minimize: true
              }
            },
                        'sass-loader',
                        {
                            loader: 'postcss-loader',
                            options: {
                                plugins: function() {
                    return [
                      require('autoprefixer')
                    ];
                  }
                            }
                        }
                    ],
                }),
                include: path.resolve(__dirname, 'src')
            }
        ]
  }
};

在我的组件上，我需要以这种方式使用scss： import styles from './styles.scss';

我认为问题出在服务器端渲染方面。...知道吗？

带有scss和css模块的ssr时出现奇怪的错误

0 个答案: