Как работать с sass @use и webpack sass-загрузчиком

#javascript #webpack #sass

#javascript #webpack #sass

Вопрос:

В моем проекте я обнаружил, что у меня были дубликаты стилей, введенные на мою страницу, поэтому, чтобы решить эту проблему, я перешел к @use вместо использования @import. После этого шага я обнаружил, что он тоже дал мне дубликаты, даже если в документации сказано, что вы можете использовать @use без получения дубликатов.

Я обнаружил, что проблема заключалась в том, что, поскольку я импортирую свой sass в javascript, создаются дубликаты, если удалить весь импорт javascript sass и использовать только @use, он работает нормально, но я хочу понять, как я должен использовать эту функцию.

Мой проект разделен на разные модули, вот пример:

 /header/
--- header.pug
--- header.js
--- header.sass

/footer/
--- footer.pug
--- footer.js
--- footer.sass
    
index.pug
index.js // Before i was importing header and sass here
index.sass // Now here i use @use and import header.sass and footer.sass
 

Ответ №1:

Я обнаружил, что для решения этой проблемы мне пришлось связать все файлы SASS напрямую, не импортируя их в мои JS-файлы.

Если вы хотите использовать @use, вы не можете импортировать их в JS, поскольку SASS должен знать, нужно ли и как работать с импортированными файлами, чтобы предотвратить дублирование