在 s-s-r 上的反应组件中导入 scss

Posted 2023-02-22

【中文标题】在 s-s-r 上的反应组件中导入 scss

【英文标题】：import scss in a react component on s-s-r

【发布时间】：2019-05-28 13:02:42

【问题描述】：

我正在使用 webpack react express 和 s-s-r（服务器端渲染）构建一个骨架（为我自己或任何想要它的人）。

我遇到了无法在 react 组件中导入 scss 的问题。

出于某种原因，我可以将它们导入到我做ReactDOM.hydrate的文件中

我尝试了数百种不同的 webpack 配置，还尝试生成单个 css 文件，但我也无法做到。

scss 配置

      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
    

package.json 依赖：

"@babel/core": "^7.2.2",
"@babel/plugin-proposal-class-properties": "^7.2.3",
"@babel/preset-env": "^7.2.3",
"@babel/preset-react": "^7.0.0",
"autoprefixer": "^9.4.3",
"babel-loader": "^8.0.4",
"clean-webpack-plugin": "^1.0.0",
"css-loader": "^2.1.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-webpack-plugin": "^3.2.0",
"isomorphic-style-loader": "^4.0.0",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.11.0",
"nodemon": "^1.18.9",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2",
"webpack": "^4.28.2",
"webpack-cli": "^3.1.2",
"webpack-node-externals": "^1.7.2"
"axios": "^0.18.0",
"express": "^4.16.4",
"react": "^16.7.0",
"react-dom": "^16.7.0"

我需要 scss 的简单水合物文件：

require('./index.scss');
const React = require('react');
const ReactDOM = require('react-dom');
const Search = require('./Search');

ReactDOM.hydrate(<Search text=window.__INITIAL__.text />, 
document.getElementById('root'));

传递给 hydra 的相同组件我无法添加 require 导致 webpack 编译中断。

const React = require('react')
const Nav = require('../../components/nav/Nav.js')

class Search extends React.Component 
constructor(props) 
    super(props);

    this.state = 
        text: props.text || null,
    


render() 
    return (
        <div id="main">
            <Nav />
            <p>this.state.text</p>
        </div>
    );



module.exports = Search;

我正在尝试让require or import 在每个组件中工作，但到目前为止还不能。

【参考方案1】：

你可以使用这个 webpack 配置在你的 s-s-r 中添加 sass 并做出反应。

webpack 配置：

const path = require('path');
const isDevelopment = true;

module.exports = [
  
    name: 'client',
    target: 'web',
    entry: './client.jsx',
    output: 
      path: path.join(__dirname, 'static'),
      filename: 'client.js',
      publicPath: '/static/',
    ,
    resolve: 
      extensions: ['.js', '.jsx']
    ,
    devtool: 'source-map',
    module: 
      rules: [
        
          test: /\.(js|jsx)$/,
          exclude: /(node_modules\/)/,
          use: [
            
              loader: 'babel-loader',
            
          ]
        ,
        
          test: /\.scss$/,
          use: [
            
              loader: 'style-loader',
            ,
            
              loader: "css-loader",
              options: 
                modules: 
                  localIdentName: "[name]__[local]___[hash:base64:5]",
                ,
                sourceMap: isDevelopment,
              
            ,
            
              loader: 'sass-loader'
            
          ]
        
      ],
    ,
  ,
  
    name: 'server',
    target: 'node',
    entry: './server.jsx',
    output: 
      path: path.join(__dirname, 'static'),
      filename: 'server.js',
      libraryTarget: 'commonjs2',
      publicPath: '/static/',
    ,
    devtool: 'source-map',
    resolve: 
      extensions: ['.js', '.jsx']
    ,
    module: 
      rules: [
        
          test: /\.(js|jsx)$/,
          exclude: /(node_modules\/)/,
          use: [
            
              loader: 'babel-loader',
            
          ]
        ,
        
          test: /\.scss$/,
          use: [
            
              loader: 'isomorphic-style-loader',
            ,
            
              loader: "css-loader",
              options: 
                modules: 
                  localIdentName: "[name]__[local]___[hash:base64:5]",
                ,
                sourceMap: isDevelopment,
              
            ,
            
              loader: 'sass-loader'
            
          ]
        
      ],
    ,
  
];

我设置了一个样板，你可以在这里使用它： https://***.com/a/68600509/6200607