Как именно эффективно использовать node-sass с create-react-app 2?
Итак, с create-react-app @ v1 я писал задачи gulp для минимизации и компиляции SASS, что происходило не в реальном времени, но теперь в create-react-app @ v2 Facebook поддерживает node-sass для компиляции и отражения изменений в реальном времени. Итак, мой вопрос в том, что
With node-sass, where do I put my
styles.scss?
Я пытался вставить его в index.html, но он не работает, так что, возможно, index.js решит проблему?
Will CRA2 minify my SASS in
styles.min.cssonce Inpm run build?
@AlexanderStaroselsky да, я читал документацию, но нигде не упоминается, как минимизировать ваш выполненный css, обычно я использую cssnano для минимизации.
Вы на самом деле пробовали? Следуя документации, импортировав файл SCSS и проверив, компилируется ли он и минимизируется на npm run build?
@AlexanderStaroselsky Пока нет, сделаю для него манекен, но постобработка показывает, что CSS не минифицирован facebook.github.io/create-react-app/docs/post-processing-css
Тебе следует это попробовать. Создание нового create-react-app, обновление App.css до App.scss и обновление browserslist в package.json компилирует, минимизирует и пост-обрабатывает CSS. Попробуйте "last 2 versions" и "> 5%" для browserslist с чем-то вроде display:flex, он добавит необходимые префиксы браузера. Дело в том, что просто попробуйте в следующий раз, прежде чем на половину ваших вопросов будут даны ответы.
Ответы 1
Поместите свои стили в /src/App.scss и обновите src/App.js (файл / индекс JS верхнего уровня), чтобы включить App.scss вместо .css. Это заставит CRA автоматически компилировать / обрабатывать SCSS.
См. Также: https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet
Итак, нормально ли поместить все мои файлы _sass.scss в один каталог, а затем @import их в _styles.scss верхнего уровня?
Да, точно. Обычно создают каталог /styles (или sass, или css) и импортируют туда файлы с App.scss верхнего уровня. Он также должен автоматически минимизировать CSS, согласно facebook.github.io/create-react-app/docs/post-processing-css