Блог

Главная - Вопросы по программированию - Импортировать SCSS в PostCSS через Webpack

Импортировать SCSS в PostCSS через Webpack

#webpack #sass #postcss

#webpack #sass #postcss

Вопрос:

В настоящее время я работаю над проектом, в котором мне нужно импортировать определенный scss файл в один из css файлов, чтобы я мог использовать некоторые переменные в нем. Этот проект использует PostCSS с загрузчиком в webpack.

До сих пор я пытался использовать анализатор SCSS, но, похоже, это не работает.

Приведенный ниже пример кода показывает, что я хочу сделать с основным colors.css файлом:

 @import "@theme-data/build/scss/variables/_darkBlueTheme.scss";

:global .lightGray {
  --textColor: $colorScheme-textColor;
  --graph-axis-label-color: rgba(104, 69, 69, 0.65);
  --tooltip-textColor: #f5f5f5;
  --tooltip-backgroundColor: #535353;
  --backgroundColor: #d9d9d9;
}

Кто-нибудь знает, как я могу настроить webpack для обработки этого?

Большое спасибо!

Комментарии:

1. Почему именно у вас есть colors.css , а не colors.scss ? Это не создало бы вам этой проблемы в первую очередь.

2. @Kamelkent это проект, который я перенял у другого разработчика, который хотел «эмулировать» scss с помощью postcss.

Ответ №1:

Для этого вам понадобятся 2 плагина:

 npm i -D postcss-easy-import precss

Затем обновите postcss.config.js 

 module.exports = {
    plugins: [
        require('postcss-easy-import')({
            path: ["src/css"] //or wherever it should look for relative paths
        }),
        require('precss'),
        //.. rest of your plugins
    ]
}

PreCss поддерживает синтаксис scss, а PostCSS Easy Import позволяет вашим операторам импорта работать. Плагин импорта должен быть первым в списке.

Документация:

Простой импорт PostCSS — https://github.com/trysound/postcss-easy-import (для получения дополнительных сведений посмотрите на импорт postcss, который он использует под капотом — https://github.com/postcss/postcss-import )

ПреКсс — https://github.com/jonathantneal/precss

Это заставит файлы css действовать как файлы scss, поэтому вы можете просто изменить расширения с scss на css, и все будет в порядке.

В противном случае вы можете написать отдельное правило в webpack для scss, чтобы сгенерировать css-файл с помощью scss loader, а затем импортировать этот CSS-файл в вашу точку входа.