web-dev-qa-db-ja.com

SASS（コマンドラインから）とAutoprefixerを使用（Bootstrap 4.xの場合）

私は最近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";

このようにして、私は問題なくbootstrapを私の好みに合わせてカスタマイズできます。

しかし、今日、グラフィックコンポーネント（カスタム選択）が正しくレンダリングされないことに気付きました。いくつかの調査の後、これはコンパイル中にAutoprefixerが不足していることが原因であることがわかり、したがって一部のcssプロパティが私のbootstrap.min.css。

私はこれをBootstrapドキュメントで見つけました： https://getbootstrap.com/docs/4.2/getting-started/build-tools/#autoprefixer

しかし、私はAutoprefixerを使用してBootstrap（with sass ）をコンパイルするソリューションを見つけることができません。

twitter-bootstrapsassbootstrap-4autoprefixer
10
WhiteLine

これは私が直面していたまったく同じ問題です。だから私はインターネットでたくさん見て、この問題の一つの可能​​な解決策を見つけました。この問題は [〜＃〜] npm [〜＃〜] （Node Package Manager）を使用して修正できます。読む this または this Article

あなたが必要なもの、

Package.jsonファイルを作成するか、npm initを実行します

記事に記載されているようにコマンドを作成します

あなたのdevDependenciesをあなたのケースに追加してください node-sassautoprefixeronchange and 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

5
Ismail Farooq

bootstrapとカスタムcssを別々に保つことはできません。伝統的に、私たちは別の外部スタイルを使用してbootstrapをカスタムcssで上書きしようとしています。 bootstrapコードに手を加えずにカスタムスタイルを追加して、bootstrap mainのみをインポートすることでインポートを追加して、sassで新しい外部スタイルシートを作成してみてください。カスタムスタイルを含む.scss

0
cyrus

Npmを使用してscssをcssに変換していると思います。

Autoprefixerプラグインが組み込まれているpostcssをインストールするだけです。次に、コマンドラインのsassの代わりに、コマンドラインでpostcssを使用してcssに変換する必要があります。 https://www.npmjs.com/package/postcss#npm-run--cli を参照してください

0
Sudipto Roy