Как обрабатывать импорт SASS при создании изоморфного приложения React?

Question

В настоящее время у меня есть текущая настройка для моего приложения React с поддержкой SSR:

• Реагировать приложение
• Экспресс-сервер, который компилирует приложение React через веб-пакет
• Использование babel-node для запуска приложения Express с функциями ES6 и т. Д.

Все работает нормально, я запускаю приложение Express, и оно компилирует мое приложение React и т. Д. Однако, затем - я начал использовать CSS-модули для приложения React, а затем, конечно, все сломалось, только на стороне сервера. курс. Он не знает, как обрабатывать мои файлы .scss, когда они импортируются в приложение React.

Если мы забудем о CSS-части, все будет работать так, как я хочу. Я могу запустить все приложение в "dev-mode", где у меня есть горячая перезагрузка и т. Д., Babel-node передает мой код узла ES6 и т. Д.

И я настроил скрипт сборки, который компилирует исходный узел для действительного ES5, и приложение React объединяется в один файл. Все хорошо.

Но как мне сохранить мои настройки, но если модули CSS работают без Node, он жалуется, что не понимает этот код?

Мое половинное решение, которое я придумал, было, когда я собирал все для производства, я говорю babel пропустить мой файл serverRender.js (который импортирует мой App.js, использует renderToString и т. Д., И вместо этого скомпилируйте этот конкретный файл с помощью Webpack (используя isomorphic-style-loader, css-loader и т. д.) и выведите его в нужную папку для моей «серверной» папки / структуры. И потом, если я вернусь к работе в режиме разработки, у меня снова возникнет та же проблема, если я тоже не настрою Webpack для этой части разработки ...

Кто-нибудь может подсказать мне лучший способ сделать эту настройку?

Answer 1

У меня была такая же проблема при работе с изоморфным приложением React. Что бы я ни пытался, у меня либо была проблема, описанная здесь: Компиляция SCSS в изоморфном приложении React , либо ошибка ниже:

Ошибка: сбой анализа модуля: неожиданный токен (1: 0) Вам может понадобиться соответствующий загрузчик для обработки этого типа файлов.

Мне удалось решить эту проблему, добавив пакет isomorphic-style-loader в настройки моего сервера в веб-пакете. Вот конфиги клиента для веб-пакета:

    var browserConfig = {
       //usual stuff
       module: {
         rules: [{
         //... ,
         {
            test: /\.scss$/,
            use: [
                {
                    loader: 'style-loader',
                },
                {
                    loader: 'css-loader',
                    options: {
                        modules: true, //turns on the CSS Module mode
                        importLoaders: 1,
                        localIdentName: '[name]__[local]___[hash:base64:5]', //generates CSS class names
                        sourceMap: true
                    }
                },
                {
                    loader: 'sass-loader'
                }
            ]
        }
    ]
}

};

И настройки сервера:

var serverConfig = { 
   //...
   module: {
    rules: [{
     //... ,
    {
            test: /\.scss$/,
            use: [
                    {
                        loader: 'isomorphic-style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            importLoaders: 1,
                            localIdentName: '[name]__[local]___[hash:base64:5]',
                            sourceMap: true
                    }
                },
                    {           
                        loader: 'sass-loader'
                }
            ]
    }    
    ]
},
}

С этими конфигами я смог создать styles.scss с простыми стилями:

$blueColor: #2196F3;

.component {
    background: $blueColor;
}

Импортировать его в файл JS:

import myStyles from './styles.scss';

И использовать его внутри компонента React в render ():

<div className={ myStyles.component }>

Это решение любезно предоставлено DigitalKwarts, более подробную информацию об этом решении можно найти здесь: https://blog.digitalkwarts.com/server-side-rendering-with-reactjs-react-router-v4-react-helmet-and-css-modules/

Дайте мне знать, сработало ли это для вас или вы смогли найти лучшее решение.