Реагировать на библиотеку компонентов - получение стилуса для работы

Я использую эту библиотеку https://github.com/facebook/create-react-app

Я пытаюсь получить стилус

То, что я сделал до сих пор,

npm install --save-dev stylus

а также

npm install --save-dev stylus-loader

И затем добавляется в package.json,

"build-css": "stylus src/ -o src/",
"watch-css": "npm run build-css && stylus src/ -o src/ --watch --recursive",

как указано в библиотечной документации

В этой библиотеке нет явного файла webpack

+3
источник поделиться
4 ответа

У меня была та же проблема, и я нашел это решение, которое вы можете проверить по ссылке ниже, но также здесь транскрибируется для справки:

Решение 1

Как использовать Stylus с Create React App

Во-первых, вам нужно установить Stylus, если у вас уже нет:

npm install stylus -g

Затем вам нужно создать новое приложение для реагирования:

create-react-app my_app
cd my_app
mkdir src/static/stylus

Теперь вам нужно установить пакет npm-run-all:

npm install --save-dev npm-run-all

Для последнего шага вам придется удалить скрипты сборки и запуска из package.json и заменить их следующим:

"build-css": "stylus -c src/static/stylus/ --out src/static/css",
"watch-css": "npm run build-css && stylus -c -w src/static/stylus/ --out src/static/css",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-scripts build",
"build": "npm-run-all build-css build-js"

Теперь вы можете запускать приложение обычно с помощью

npm start

и все ваши скрипты стилусов собраны каждый раз, когда ваше приложение перезагружается.

Решение 2

Я не пробовал этот, но, может быть, он тоже заслуживает проверки:

создать реагирующий-приложение-стилус

В основном установите модуль npm:

npm install create-react-app-stylus --save-dev

Затем замените скрипты запуска и сборки в своем пакете. Json.

"scripts": {
  "start": "react-scripts-with-stylus start path/to/main.styl",
  "build": "react-scripts-with-stylus build path/to/main.styl",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
},

Заключение:

Я получил это нормально, теперь я просто пытаюсь найти способ заставить его работать в каждой папке компонента.

+2
источник

Для того, чтобы вы получили файл webpack, используя приложение create response, вам нужно выгрузить приложение. (https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject). Но обратите внимание, что после извлечения вы не можете вернуть приложение назад.

Надеюсь, это поможет вам!

+1
источник
  1. Запустите npm run eject, который добавляет все конфиги и зависимости кпроект. Вы не можете вернуть его
  2. npm i --save-dev stylus stylus-loader
  3. Добавить конфигурацию в веб-пакет для стилуса (необходимо обновить все конфиги: разработка, изготовление)

webpack.config → module → rules → oneOf

разработка - добавить новое правило

 {
    test: /\.styl$/,
    use: [
      require.resolve('style-loader'),
      {
        loader: 'css-loader',
        options: {
          importLoaders: 1,
        },
      }, {
        // postcss-loader и autoprefixer are already in 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 does not support IE8 anyway
                    ],
                    flexbox: 'no-2009',
                  }),
                  cssMQPacker(),
                ],
              },
            },
            {
              loader: require.resolve('stylus-loader')
            }
          ],
        },
        extractTextPluginOptions
      )
    ),
    // Note: this won't work without 'new ExtractTextPlugin()' in 'plugins'.
},
0
источник

По состоянию на октябрь 2019 года предыдущие ответы были устаревшими. Пожалуйста, следуйте моим инструкциям для получения последней версии 'create-Reaction-app'.

  1. Запустите yarn eject, который показывает все конфиги из "ответных скриптов" и добавляет зависимости (вы не можете восстановить их)
  2. Переустановите модули npm rm -rf node_modules && yarn install (причина ошибки https://github.com/facebook/create-react-app/issues/6099)
  3. Установить пакеты 'stylus' и 'stylus-loader' yarn add stylus stylus-loader
  4. Открыть config/webpack.config.js

    а. Найти блок загрузки SASS:

            {
              test: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent
                },
                'sass-loader'
              )
            },

б. После этого добавьте:

            // Adds support for Stylus (using .styl extension).
            {
              test: /\.styl$/,
              exclude: /\.module\.styl$/,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap
                },
                'stylus-loader'
              ),
              sideEffects: true
            },
            // Adds support for CSS Modules, but using Stylus
            // using the extension .module.styl
            {
              test: /\.module\.styl$/,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent
                },
                'stylus-loader'
              )
            },
0
источник

Посмотрите другие вопросы по меткам или Задайте вопрос