如何在Bootstrap 4下游定制中使用其工具链生成优化CSS

Got it, let's get your setup sorted so you can compile your custom.scss into both clean, unminified custom.css and compressed custom.min.css—complete with autoprefixing and all the optimizations Bootstrap uses. Here's a step-by-step guide tailored to your existing project structure:

1. Install Required Dev Dependencies #

First, install the tools we'll need for compiling, prefixing, and compressing. Run this in your project root:

npm install --save-dev sass postcss autoprefixer cssnano npm-run-all

• sass: Official Dart Sass compiler (Bootstrap uses this too)
• postcss + autoprefixer: Adds browser-specific CSS prefixes based on real-world browser support data
• cssnano: Compresses and optimizes CSS files (removes whitespace, merges selectors, etc.)
• npm-run-all: Lets us run multiple npm scripts in sequence smoothly

2. Create a PostCSS Configuration File #

In your project root, make a new file named postcss.config.js with this content:

module.exports = {
  plugins: [
    require('autoprefixer'), // Handles vendor prefixing
    require('cssnano')({     // Minifies CSS with default optimizations
      preset: 'default',
    })
  ]
};

This file tells PostCSS exactly which plugins to use and how to configure them for our workflow.

3. Set Up npm Scripts for Building CSS #

Open your package.json file and update the "scripts" section to include these commands:

"scripts": {
  "css:compile": "sass scss/custom.scss dist/custom.css --style expanded",
  "css:prefix": "postcss dist/custom.css -o dist/custom.css",
  "css:minify": "postcss dist/custom.css --use cssnano -o dist/custom.min.css",
  "css:build": "npm-run-all css:compile css:prefix css:minify",
  "css:watch": "sass --watch scss/custom.scss dist/custom.css --style expanded && npm-run-all css:prefix css:minify"
}

Let's break down what each script does:

• css:compile: Compiles your SCSS into human-readable, unminified CSS and saves it to a new dist folder
• css:prefix: Runs Autoprefixer on the unminified CSS to add necessary vendor prefixes (like -webkit- or -moz-)
• css:minify: Takes the prefixed, unminified CSS and compresses it into a lightweight .min.css file
• css:build: Runs all three steps in one go—ideal for production builds
• css:watch: Watches your custom.scss for changes, auto-recompiles it, then applies prefixing and minification (perfect for development)

4. Create the dist Folder #

Before running the build, make sure the output directory exists. Run this in your project root:

mkdir dist

5. Run the Build #

Now you're ready to generate your optimized CSS files! Just run:

npm run css:build

After it finishes, your project structure will look like this:

my-project/
├── scss
│   └── custom.scss
├── node_modules/
├── dist/
│   ├── custom.css    # Unminified, prefixed CSS (great for debugging)
│   └── custom.min.css # Minified, prefixed CSS (for production)
├── postcss.config.js
└── package.json

Bonus: Auto-Compile During Development #

For day-to-day work, use the watch script to avoid manually running the build every time you edit custom.scss:

npm run css:watch

It will automatically recompile and optimize your CSS whenever you save changes to your SCSS file.

内容的提问来源于stack exchange，提问作者Arkh