Импортировать scss в компонент реакции на SSR

Я работаю над скелетом, который будет (для себя или кого-то еще) с webpack response express и ssr (рендеринг на стороне сервера).

У меня проблема, из-за которой я не могу импортировать scss в компоненты React.

Почему-то я могу импортировать их в файлы, куда я делаю ReactDOM.hydrate.

Я пробовал сотни различных конфигураций веб-пакетов, а также пытался создать один файл 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'));

тот же компонент передан в гидрат, где я не могу добавить требование, потому что он прерывает компиляцию веб-пакета.

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 работать внутри каждого компонента, но пока не смог.

node.js reactjs express webpack sass

01.01.2019 17:01

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

426

Ответы 1

Вы можете использовать эту конфигурацию веб-пакета, чтобы добавить sass в свой ssr и отреагировать.

конфигурация 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://stackoverflow.com/a/68600509/6200607

31.07.2021 10:45

Другие вопросы по теме

React Context API - компонент повторной визуализации при изменении контекста без переноса визуализации в потребитель

Как поддерживать isAuth и защищать частные маршруты?

Ошибка перекрестного происхождения при попытке ссылки на внешний файл JS

Проблема с положением всплывающей подсказки в bootstrap 4

Как разделить медиа-запросы в конфигурации webpack?

Graphql TS1208 "Невозможно скомпилировать пространства имен, если указан флаг изолироватьModules

Реагировать на передачу значения от дочернего элемента другому родителю

Ошибка React-Native Add Mob Undefined не является объектом (оценка '_reactNative. View.propTypes.style')

Передача реквизитов React и доступ как ObjectName.ObjectName

Разница между использованием поддержки детей напрямую и использованием метода React.Children.toArray

Импортировать scss в компонент реакции на SSR

Ответы 1

Другие вопросы по теме

Похожие вопросы