reactjssassreact-dom-server

Syntax Error while using ReactDOMServer with Sass


Im getting Syntax Error like below while using ReactDOMServer and Sass in my project:

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;

This is my server scripts with 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 component is child component of App component, and Menu.scss imported like below:

import React from 'react';

import './Menu.scss';

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

and Finally Menu.scss :

img#logo{
  height: 100%;
}

Do you have any suggestion? Could you tell me please, whats wrong with my source ?

Thanks!


Solution

  • After long investigation I found 2 type of solution for this issue thanks to dimaip! So , Im giving related links below you can check if you have this problem like me:

    1) 1st is adding env variable to check in webpack for importing css or not, and using .css file seperated from bundle.js For this solution you can check this link

    2) 2nd solution is using webpack for server-side renderToString function and using it inside app.get('*') Additionaly, you can check this link

    Thanks!!!