О
в общем как я понял пока рано до 5 обновляться т.к. многие сторонние плагины еще не адаптировались
Size: a a a
2020 December 13
Н
Доброе утро всем! Подскажите пожалуйста, как правильно собрать SCSS файлы? Скачала css-лоадер и scss-лоадер, в конфиг записала так
Н
папка с scss лежит в src рядом с папкой с js-модулями. Откуда вебпак должен получить доступ к стилям? Или как для стилей указать входной файл?
KS
папка с scss лежит в src рядом с папкой с js-модулями. Откуда вебпак должен получить доступ к стилям? Или как для стилей указать входной файл?
ты их должна сначала импортировать в js, а потом экстрагировать из кода с помощью https://webpack.js.org/plugins/mini-css-extract-plugin/
Н
ты их должна сначала импортировать в js, а потом экстрагировать из кода с помощью https://webpack.js.org/plugins/mini-css-extract-plugin/
если не трудно, не мог бы ты объяснить мне, что именно должно происходить? То есть вебпак находит scss файл через импорт, превращает его в css и компилирует? Или мне сразу нужно давать ссылку на css файлы, преобразованные из scss?
Н
я не знаю, как должно быть правильно
KS
если не трудно, не мог бы ты объяснить мне, что именно должно происходить? То есть вебпак находит scss файл через импорт, превращает его в css и компилирует? Или мне сразу нужно давать ссылку на css файлы, преобразованные из scss?
первое. ты импортируеш scss, через import. вебпак прогоняет его через лоадер, трансплитиует в css и вставляет в js. потом miniextractcss plugin ищет эти css вставки во всех js файлах, извлекает их и мержит в общий css файл. это прям совсем-совсем в общем.
KS
хотя ещё да, если ты не хочешь заморачиваться с импортами, то можно задать scss как ещё одну точку входа.
Н
хотя ещё да, если ты не хочешь заморачиваться с импортами, то можно задать scss как ещё одну точку входа.
я так понимаю, можно все scss файлы импортировать в один, и этот один задать как точку входа. Что будет тогда? он все равно все соберет в один бандл.жс?
KS
я так понимаю, можно все scss файлы импортировать в один, и этот один задать как точку входа. Что будет тогда? он все равно все соберет в один бандл.жс?
так и делают обычно.
Н
ок, спасибо, так и пробую сейчас
Н
так и делают обычно.
я сделала так, но стили все равно не скомпилировались, в чем ошибка?
KS
хммм, ну попробуй в main.js написать
и убрать scss из точки входа. я честно говоря давно уже не компилировать отдельно scss, всё как-то через импорты больше в компонентах. мог что-то забыть.
import './SCSS/main.scss';и убрать scss из точки входа. я честно говоря давно уже не компилировать отдельно scss, всё как-то через импорты больше в компонентах. мог что-то забыть.
Н
хммм, ну попробуй в main.js написать
и убрать scss из точки входа. я честно говоря давно уже не компилировать отдельно scss, всё как-то через импорты больше в компонентах. мог что-то забыть.
import './SCSS/main.scss';и убрать scss из точки входа. я честно говоря давно уже не компилировать отдельно scss, всё как-то через импорты больше в компонентах. мог что-то забыть.
ок, а лоадеры прописаны правильно?
Н
Н
аааа, если прописать вход, то он собирает все в отдельный css файл, просто его надо отдельно подключить к html, а я думала, что это все само собой соединится... Туплю, сорян. Первый раз делаю такое сама)
Н
тогда у меня остается вопрос: а такой файл как main.css.map — он для чего нужен и нужен ли вообще? Может его можно удалить?
KS
тогда у меня остается вопрос: а такой файл как main.css.map — он для чего нужен и нужен ли вообще? Может его можно удалить?
он нужен только для дебага. пропиши ещё
в use секции и он не будет генерироваться.
sourceMap: false
в use секции и он не будет генерироваться.
Н
он нужен только для дебага. пропиши ещё
в use секции и он не будет генерироваться.
sourceMap: false
в use секции и он не будет генерироваться.
А, поняла, он вроде нужен, чтобы другой человек мог редактировать мой код, да? Но собранный css файл он не схлопнутый, в случае чего его и так можно будет прочитать, поэтому мап и не нужен в данном случае?