Для включения 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 файлы будут обработаны стандартным образом.