Как добавить поддержку stylus в react-create-app проект?

Question

[evg_96]

В проекте созданном с помощью create-react-app нет конфига webpack.
Как добавить компиляцию stylus?

Answer 1

[lmilligan]

Если вам нужен конфиг webpack, используйте npm run eject.

Answer 2

[Кирилл Матросов]

1. Выполнять команду npm run eject, которая добавит все зависимости и конфиги в проект. Отменить нельзя
   
2. npm i --save-dev stylus stylus-loader
   
3. Дальше добавляем в webpack настройки обработку stylus (необходимо добавить и в development, и в production)
   

webpack.config -> module -> rules -> oneOf
developement - добавляем новое правило

{
            test: /\.styl$/,
            use: [
              require.resolve('style-loader'),
              {
                loader: 'css-loader',
                options: {
                  // можно удалить, если не нужны css модули
                  modules: true,
                  localIdentName: '[name]__[local]--[hash:base64:5]',
                  camelCase: true,
                  sourceMap: true,
                },
              }, {
                // postcss-loader и autoprefixer уже есть в create-react-app
                loader: 'postcss-loader',
                options: {
                  plugins: () => [
                    autoprefixer({ browsers: ['>= 10%', 'last 2 versions'] })
                  ],
                  sourceMap: true,
                },
              }, {
                loader: 'stylus-loader',
                options: {
                  sourceMap: true,
                },
              }],
          },

production - редактируем обработку стилей на

{
            test: /\.(styl|css)$/,
            loader: ExtractTextPlugin.extract(
              Object.assign(
                {
                  fallback: {
                    loader: require.resolve('style-loader'),
                    options: {
                      hmr: false,
                    },
                  },
                  use: [
                    {
                      loader: require.resolve('css-loader'),
                      options: {
                        importLoaders: 1,
                        minimize: true,
                        sourceMap: shouldUseSourceMap,
                      },
                    },
                    {
                      loader: require.resolve('postcss-loader'),
                      options: {
                        // Necessary for external CSS imports to work
                        // https://github.com/facebookincubator/create-react-app/issues/2677
                        ident: 'postcss',
                        plugins: () => [
                          require('postcss-flexbugs-fixes'),
                          autoprefixer({
                            browsers: [
                              '>1%',
                              'last 4 versions',
                              'Firefox ESR',
                              'not ie < 9', // React doesn't support IE8 anyway
                            ],
                            flexbox: 'no-2009',
                          }),
                          cssMQPacker(),
                        ],
                      },
                    },
                    {
                      loader: require.resolve('stylus-loader'),
                      options: {
                        minimize: true
                      }
                    }
                  ],
                },
                extractTextPluginOptions
              )
            ),
            // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
          },