1

В головном .scss-файле я последовательно подключаю файл с переменными, и файлы конкретных секций. Это выглядит так:

@import 'variables'
@import 'header'
@import 'footer'

Если не написать в начале каждой секции @import 'variables', то PHPStorm подчеркнёт использование переменных и расширяемых модулей, как вызванные без должного объявления.

Импортирование в начале файла каждой секции не просто использует переменные — происходит импорт всего файла. Поэтому такой вариант не подойдёт. Вдобавок это нарушает работу стилей. На официальном сайте SASS предлагают использовать @use, однако там же указывают, что его поддержки ещё нигде нет.

Можно ли как-то навести порядок в этом вопросе, пока разработчики не ввели поддержку @use?

2
  • Что значит "не просто использует переменные — происходит импорт всего файла" ? В variables не должно быть никаких стилей, только переменные! Ну и опять же, а чем вам мешает "подчеркивание"? Commented 14 нояб. 2019 в 19:41
  • @DmitryKozlov в переменных я указал и расширяемые шаблоны, которые использую через @extend %template. Они также подчёркиваются. И тогда при импорте файлы некорректно конкатенируются, добавляется дублирование и перезаписывание кода. А подчёркивание мне мешает тем, что я могу действительно ошибочно использовать переменную/шаблон, или столкнуться с такой проблемой, открыв чужой код. И не узнать об этом. Раз IDE даёт возможность — надо пользоваться. Commented 14 нояб. 2019 в 20:36

1 ответ 1

1

Попробуй использовать инъекцию файла с константами и миксинами в функции prependData

use: [
                        {
                            loader: MiniCssExtractPlugin.loader
                        },
                        {
                            loader: 'css-loader'
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                plugins: () => [autoprefixer]
                            }
                        },
                        {
                            loader: 'resolve-url-loader'
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                prependData: (loaderContext) => {
                                    const constants = fs.readFileSync('./frontend/common/constants.scss', "utf8");
                                    return constants;
                                },
                                sourceMap: true
                            }
                        }
                    ]

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.