Используйте SASS (из командной строки) и Autoprefixer (для Bootstrap 4.x)
Недавно я начал использовать файлы scss, особенно для настройки Начальная загрузка.
Для компиляции моих файлов scss (а также начальной загрузки) я использую дерзкий из командной строки.
Пример :
sass /path/to/scss/bootstrap/mycustom.scss /path/to/css/bootstrap.min.css -t compressed -C --sourcemap=none
mycustom.scss примерно так:
$theme-colors: (
"custom-primary": "...",
"custom-secondary": "..."
);
....
....
@import "bootstrap";
Таким образом, я могу без проблем настроить загрузчик по своему усмотрению.
Однако сегодня я понял, что графический компонент (пользовательский выбор) отрисовывался неправильно. После некоторых исследований я обнаружил, что это было вызвано отсутствием Автопрефиксер во время компиляции, и поэтому некоторые свойства css не были добавлены в мой bootstrap.min.css.
Я нашел это в документации Bootstrap: https://getbootstrap.com/docs/4.2/getting-started/build-tools/#autoprefixer
Но я не могу найти решение для компиляции Bootstrap (с дерзкий) с использованием Autoprefixer.
Ммммм нет, также в приведенной ссылке bassjobsen.weblogs.fm/prepared-bootstrap-v4 нет решения
Готовы ли вы изменить свой рабочий процесс или просто хотите узнать, как использовать Autoprefixer с SASS?
Если бы это было возможно, я бы предпочел использовать SASS и Autoprefixer.
Ответы 4
Я думаю, вы используете npm для преобразования scss в css.
Просто нужно установить postcss, который поставляется вместе с плагином autoprefixer. Затем вместо sass в командной строке вам нужно использовать postcss в командной строке для преобразования в css. см. https://www.npmjs.com/package/postcss#npm-run--cli
Это точно такая же проблема, с которой я столкнулся. Поэтому я много смотрю в Интернете и нашел одно возможное решение этой проблемы. Вы можете решить эту проблему, используя НПМ (диспетчер пакетов узла). Чтение это или эта статья
Что вам нужно,
Создайте файл package.json или запустите npm init
Создайте свою команду, как указано в статье
Добавьте свой devDependencies в вашем случае узел-дерзостьавтопрефиксерпо изменению и postcss-кли
Запускаем npm install (после установки всех пакетов)
Запустите npm start
Вот как я делаю Например
пакет.json
{
"name": "web_name",
"version": "1.0.0",
"description": "",
"main": "index.js",
"devDependencies": {
"autoprefixer": "^9.4.2",
"node-sass": "latest",
"onchange": "^5.2.0",
"postcss-cli": "latest"
},
"scripts": {
"build:sass": "node-sass --output-style=expanded --source-map=true assets/scss/style.scss assets/css/style.css",
"prefix": "npm run build:sass && postcss assets/css/style.css --use=autoprefixer --output=assets/css/style.css",
"start": "onchange \"assets/scss/**/*.scss\" -- npm run prefix"
},
"browserslist": [
"last 2 versions"
],
"repository": {
"type": "git",
"url": "Repo/Path"
},
"keywords": [
"SASS"
],
"author": "Ismail Farooq",
"license": "ISC",
"homepage": "Path",
"dependencies": {}
}
Корневая структура
Структура папок Sass
Привет, спасибо за вашу помощь. Некоторые соображения: 1) Мне нужно изменить компилятор CLI SASS с это на это, верно? 2) Прежде чем я использовал sass глобально, он не был установлен внутри отдельных проектов, я хотел бы продолжать использовать его таким образом, если это возможно 3) Можно ли не использовать пакет onchange? Я предпочитаю компилировать файлы scss вручную, когда они мне нужны.
См. пример здесь jsfiddle.net/e5rxLq4p @WhiteLine, теперь вам нужно запускать npm start по вашей команде каждый раз, когда вам нужно скомпилировать
1) Правильно, Node sass в основном представляет собой пакет node, который компилирует sass в css 2) Что вы имеете в виду, не могли бы вы прояснить немного больше 3) onChange просто обнаружит изменение вашего файла, я не пытался компилировать вручную, но я уверен, что это возможно попробовать изменив команду Script > Start в package.json
... для пункта 2) я имел в виду, что в своих веб-проектах я не использую никакого менеджера пакетов для поддержания зависимостей различных библиотек, которые я использую. Я начал использовать NPM для загрузки sass и возможности использовать его из терминала для компиляции моих файлов scss, присутствующих в моих веб-проектах (все в сетевой папке). Я установил sass глобально на свой Mac и, указав на различные веб-проекты в своей сетевой папке (которая содержит все мои веб-проекты), я компилирую файлы scss вручную каждый раз, когда редактирую файл scss в проекте.
Пример: sass /path-to-network-folder-projects/project1/scss/main.scss /path-to-network-folder-projects/project1/css/main.css -t compressed -C --sourcemap=none
Вы не можете сохранить загрузку и свой собственный CSS разными. как обычно мы пытаемся перезаписать бутстрап нашим пользовательским css, используя другой внешний стиль, аналогичным образом, если вы хотите изучить sass, попробуйте создать новую внешнюю таблицу стилей с помощью sass, оставив код начальной загрузки нетронутым, и добавьте свой собственный стиль ниже импорта начальной загрузки, включив только main.scss, который включает ваши пользовательские стили
да, но по-прежнему поток css будет только сверху вниз, так что пока пусть бутстрап не трогает, тогда мы сможем удалить то, что нам не нужно, во время работы.
но ОП хочет правильного динамического решения, поэтому он добавляет награду за этот вопрос.
давайте посмотрим, что хочет белая линия
После того, как я установил глобально post-css и autoprefixer
npm install -g postcss-cli autoprefixer
я запускаю следующую команду, чтобы перезагрузить мой файл CSS с автопрефиксером.
postcss assets/theme.css --replace --use autoprefixer
Примечание: Я обновлю этот пост после того, как поработаю над одной командой, которая обрабатывает SASS CLI и Autoprefixer.
Редактировать-1: Вы можете объединить 2 команды терминала и скомпилировать и минимизировать Bootstrap SCSS, а затем запустить Autoprefixer, чтобы добавить префиксы поставщиков, подобные этому, с помощью всего одной команды:
sass scss/theme.scss:assets/theme.min.css --style=compressed && postcss assets/theme.min.css --replace --use autoprefixer
Спасибо. Я использую это решение!
Помогает ли это?