Используйте SASS (из командной строки) и Autoprefixer (для Bootstrap 4.x) - PullRequest
Новая
       47

Используйте SASS (из командной строки) и Autoprefixer (для Bootstrap 4.x)

0 голосов
/ 30 января 2019

Я недавно начал использовать файлы scss , особенно для настройки Bootstrap .

Для компиляции моих файлов scss (и также для начальной загрузки) я использую sass из командной строки.

Пример: 

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";

Thisспособ, которым я могу настроить загрузку без проблем.

Сегодня, однако, я понял, что графический компонент (custom-select) не был отображен правильно.После некоторых исследований я обнаружил, что это было вызвано отсутствием Autoprefixer во время компиляции, и поэтому некоторые свойства CSS не были добавлены в мои bootstrap.min.css .

Я нашел это в документации по Bootstrap: https://getbootstrap.com/docs/4.2/getting-started/build-tools/#autoprefixer

Но я не могу найти решение для компиляции Bootstrap (с sass ) с помощью Autoprefixer.

Ответы [ 3 ]

0 голосов
/ 07 февраля 2019

Это та же самая проблема, с которой я столкнулся.Поэтому я много смотрю в интернете и нашел одно возможное решение этой проблемы.Вы можете решить эту проблему с помощью NPM (менеджер пакетов узлов).Прочитайте это или эту статью

Что вам нужно,

Создайте файл package.json или запустите npm init

Создайте свою команду, как упомянуто в статье

Добавьте ваш devDependencies в вашем случае node-sass Авторефиксатор onchange и postcss-cli

Выполнить npm install, (после установки всего пакета)

Выполнить npm start

Вот как я делаю Например

package.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": {}
}

Структура корня

enter image description here

Структура папки Sass

enter image description here

0 голосов
/ 08 февраля 2019

вы не можете оставить начальную загрузку и свой собственный CSS-код другим.как обычно, мы пытаемся перезаписать загрузчик с помощью нашего собственного CSS, используя другой внешний стиль, аналогично, если вы хотите изучить sass, попробуйте создать новую внешнюю таблицу стилей с помощью sass, оставив код начальной загрузки нетронутым, и добавьте свой собственный стиль ниже импорта начальной загрузки, включив толькоmain.scss, который включает ваши пользовательские стили

0 голосов
/ 02 февраля 2019

Я полагаю, что вы используете npm для преобразования scss в css.

Просто нужно установить postcss, который поставляется с плагином autoprefixer.Затем вместо sass в командной строке вам нужно использовать postcss в командной строке для преобразования в css.пожалуйста, обратитесь к https://www.npmjs.com/package/postcss#npm-run--cli

...