Как использовать sass / scss в приложении create-react-kotlin-app

Я пытаюсь использовать scss в приложении kotlin-response, используя приложение create-response-kotlin-app в узле для упрощения начальной загрузки, но я застрял в настройке конфигурации, чтобы заставить его работать

Я уже катапультировался, поэтому могу вручную отредактировать конфигурацию webpack. Я уже добавил следующее в dev config и соответствующий эквивалент prod.

  {
    test: /\.scss$/,
    use: [
      require.resolve('style-loader'),
      {
        loader: require.resolve('sass-loader'),
        options: {
          importLoaders: 1,
        },
      },
      {
        loader: require.resolve('postcss-loader'),
        options: {
          ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
          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',
            }),
          ],
        },
      },
    ],
  },

модифицированный package.json с помощью npm install и запуск

"babel": {
 "presets": [
   "react-app"
 ],
 "plugins": [
   [
     "babel-plugin-react-css-modules",
     {
       "filetypes": {
         ".scss": {
           "syntax": "postcss-scss"
         }
       }
     }
   ]
 ]
}

а также добавлен в index.kt

requireAll(require.context("src", true, js("/\\.scss$/")))

последняя конфигурация приложения create-response-app в узле уже поддерживает scss, поэтому я следую этому руководству https://medium.com/front-end-weekly/how-to-add-sass-or-scss-to-create-react-app-c303dae4b5bc, поскольку результат извлечения конфигурации webpack в приложении create-react-kotlin почти такой же, но все равно не повезло.

Вы когда-нибудь заставляли это работать?

gabereal 23.10.2020 22:39
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
8
1
583
0

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