Как включить css-модули только для sass/scss?

Для включения css-модулей только для sass/scss файлов в проекте, вы можете использовать следующий подход.

1. Установите необходимые пакеты:

   npm install sass-loader node-sass css-loader style-loader --save-dev

Эти пакеты позволят вам компилировать sass/scss файлы, загружать css файлы и вставлять стили в HTML страницу.

2. В конфигурационном файле webpack (обычно webpack.config.js или webpack.config.dev.js) добавьте правила для обработки sass/scss файлов:

   module.exports = {
     //...
     module: {
       rules: [
         //...
         {
           test: /.scss$/,
           use: [
             'style-loader',
             'css-loader',
             {
               loader: 'sass-loader',
               options: {
                 sassOptions: {
                   modules: true
                 }
               }
             }
           ]
         },
         // Можно добавить отдельное правило для sass файлов
         {
           test: /.sass$/,
           use: [
             'style-loader',
             'css-loader',
             {
               loader: 'sass-loader',
               options: {
                 sassOptions: {
                   indentedSyntax: true,
                   modules: true
                 }
               }
             }
           ]
         },
         //...
       ]
     },
     //...
   };

В приведенном выше примере мы используем style-loader для вставки стилей в HTML файл, css-loader для загрузки css файлов и sass-loader для компиляции sass/scss файлов. Параметр modules: true в опциях sass-loader включает css-модули только для sass/scss файлов.

3. Теперь, при импорте sass/scss файлов в ваших JavaScript файлах, вы можете использовать css-модули. Например, если у вас есть файл styles.scss:

   .container {
     display: flex;
     justify-content: center;
     align-items: center;
   }

   .title {
     font-size: 24px;
     color: $primary-color;
   }

Вы можете импортировать стили в JavaScript файле следующим образом:

   import styles from './styles.scss';

   // Использование стилей
   const container = document.createElement('div');
   container.className = styles.container;

   const title = document.createElement('h1');
   title.className = styles.title;
   title.textContent = 'Hello, World!';

   container.appendChild(title);
   document.body.appendChild(container);

Здесь мы используем импорт с именованным экспортом для получения объекта с классами стилей. Затем мы присваиваем эти классы свойству className созданных элементов для применения стилей.

В результате, только sass/scss файлы будут подвержены прогонке через css-модули, остальные css файлы будут обработаны стандартным образом.