Webpack 3 + Sass Loader: нельзя использовать scss как модуль

Я использую Webpack 3 + Sass Loader + Sass Resources Loader для создания многотемного приложения React.

Это мой webpack.config:

 {
test: /\.css$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract({
  fallback: 'style-loader',
  use: [
    {
      loader: 'css-loader',
      options: {
        importLoaders: 1,
        modules: true,
        minimize: IS_PRODUCTION,
        sourceMap: IS_DEVELOPMENT,
        localIdentName: IS_DEVELOPMENT ? '[name]__[local]__[hash:8]' : '[hash:8]'
      },
    },
    {
      loader: 'postcss-loader',
      options: {
        sourceMap: IS_DEVELOPMENT,
        plugins: postCssPlugins,
      }
    },
  ],
}),
  },  
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
  use: [
    {
      loader: 'css-loader',
      options: {
        sourceMap: IS_DEVELOPMENT,
      }
    },
    {
      loader: 'sass-loader',
      options: {
        sourceMap: IS_DEVELOPMENT
      }
    },
    {
      loader: 'sass-resources-loader',
      options: {
        sourceMap: IS_DEVELOPMENT,
        resources: [
          './common/style/flaticon/_flaticon_class.scss',
          `./common/branding/${BRANDING}/${BRANDING}.scss`,
          './common/style/bootstrap/_general_variables.scss',
          './node_modules/bootstrap/scss/bootstrap-reboot.scss', // functions, variables, mixins, reboot
          './node_modules/bootstrap/scss/_root.scss',
          './node_modules/bootstrap/scss/_type.scss',
          './node_modules/bootstrap/scss/_images.scss',
          './node_modules/bootstrap/scss/_grid.scss',
          './node_modules/bootstrap/scss/_utilities.scss',
        ]
      },
    },
  ]
})

},

На самом деле, он работает нормально, но когда я пытаюсь импортировать свои файлы scss в свой компонент реакции и использовать его как файл css, имя класса не определено.

В моем файле компонента:

import styles from './ActivityGridItem.scss';
...
<div className = {`m-2 ${styles.activityTypeIcon}`}></div>

Обычно к моему div следует применять стиль .activityTypeIcon, но сейчас он не определен.

Я пытаюсь добавить опции «modules: true» вот так:

test: /\.scss$/,
loader: ExtractTextPlugin.extract({
  use: [
    {
      loader: 'css-loader',
      options: {
        modules: true,
        sourceMap: IS_DEVELOPMENT,
      }
    },

Но тогда все файлы sass распознаются как модуль, и я не могу использовать глобальный класс boostrap, как row, col, m- * и т. д.

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

Ответы 1

Есть несколько способов сделать это

  • Вы можете использовать глобальный блок в css-модулях, чтобы сделать классы начальной загрузки глобальными.
  • Вы можете создать 2 загрузчика, один с включенными css-модулями, а другой с глобальными стилями, и как-то их различать. Например, вы можете сделать так, чтобы все файлы, заканчивающиеся на .module.scss, использовали modules: true.

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