将 ReactDOMServer 与 Sass 一起使用时出现语法错误

Question

我在项目中使用 ReactDOMServer 和 Sass 时出现如下语法错误：

SyntaxError: /Users/ceyhun23/Sites/{project_name}/lib/components/common/Menu/Menu.scss: Unexpected character '#' (1:3) 0|server | > 1 | img#logo{ 0|server | | ^ 0|server | 2 | height: 100%; 0|server | 3 | }

webpack.config.js:

const path = require('path');

const config = {
  resolve: {
    alias: {
      Assets: path.resolve(__dirname, 'lib/assets/'),
    }
  },
  entry: ['babel-polyfill', './lib/components/App.js'],
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.(png|jpg)$/i,
        exclude: /node_modules/,
        loader: 'url-loader',
        include: path.resolve(__dirname, 'lib/assets/images')
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  }
};

module.exports = config;

这是我的服务器脚本 ExpressJs

import React from 'react';
import ReactDOMServer from 'react-dom/server';

import App from './components/App';

const serverRender = () => {
  return ReactDOMServer.renderToString(
    <App />
  );
};

export default serverRender;

Menu 组件是 App 组件的子组件，Menu.scss 导入如下：

import React from 'react';

import './Menu.scss';

export default class Menu extends React.Component {
  render() {...}
}

最后 Menu.scss :

img#logo{
  height: 100%;
}

你有什么建议吗？你能告诉我，我的来源有什么问题吗？

谢谢！

Answer 1

经过长时间的调查，我找到了 2 类型的 解决方案 ，感谢 dimaip！所以，我在下面给出了相关链接，你可以检查你是否有像我这样的问题：

1) 第一个是添加 env 变量来检查 webpack 是否导入 css，并使用与 bundle.js 分开的 .css 文件对于此解决方案，您可以检查此 link

2) 第二个解决方案是将 webpack 用于 server-side renderToString 函数并在 app.get('*') 中使用它此外，您可以查看此 link

谢谢！！！

将 ReactDOMServer 与 Sass 一起使用时出现语法错误

Syntax Error while using ReactDOMServer with Sass

sass

reactjs

react-dom-server