0

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

语法错误：/Users/ceyhun23/Sites/{project_name}/lib/components/common/Menu/Menu.scss：意外字符 '#' (1:3) 0|server | > 1 | img#logo{ 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;

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

import React from 'react';

import './Menu.scss';

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

最后Menu.scss：

img#logo{
  height: 100%;
}

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

谢谢！

4

1 回答 1

0

经过长时间的调查，由于dimaip ，我找到了解决这个问题的两种类型！所以，我在下面提供相关链接，你可以检查你是否像我一样有这个问题：

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

2) 第二种解决方案是使用 webpack 作为服务器端renderToString功能并在app.get('*') Additionaly 内部使用它，您可以查看此链接

谢谢！！！

于 2018-03-04T21:16:39.683 回答