Question

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

SyntaxError：/Users/ceyhun23/Sites/{project_name}/lib/components/common/Menu/Menu.scss:Unexpected character＆＃39;＃＆＃39; （1：3） 0 |服务器| ＆GT; 1 | IMG＃标志{ 0 |服务器| | ^ 0 |服务器| 2 |身高：100％; 0 |服务器| 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

经过长时间的调查后，由于dimaip，我发现 2 类型的解决方案！所以，我给你下面的相关链接，你可以检查你是否有像我这样的问题：

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

2）第二个解决方案是使用webpack作为服务器端renderToString函数并在app.get('*')内使用它另外，您可以查看link

感谢!!!

使用带有Sass的ReactDOMServer时出现语法错误

1 个答案: