无框架基础编译SCSS及Bootstrap Sass编译配置技术问询

Hey there! Let's break down your questions step by step, starting with the basics of compiling SCSS without frameworks, then moving to your Bootstrap Sass setup.

一、 Compiling SCSS Files Without Any Frameworks (Basic Approach) #

The most straightforward way is to use the official Dart Sass CLI (since Ruby Sass is no longer maintained). Here's how to get started:

1. Install Dart Sass:
   • If you have npm installed, run: npm install -g sass
   • This is the easiest method for most projects, as it integrates seamlessly with Node.js workflows.
2. Compile a single file:
   • Run sass path/to/your/input.scss path/to/your/output.css to turn one SCSS file into CSS.
3. Auto-compile on file changes:
   • Use the watch flag to automatically recompile when you edit your SCSS: sass --watch path/to/input.scss:path/to/output.css
4. Compile an entire directory:
   • To compile all SCSS files in a source directory to a target directory (preserving file names), run: sass path/to/source/sass:path/to/target/css

二、 Setup for Bootstrap Sass & Your Project Requirements #

Let's tackle each of your specific questions one by one:

1. What tool handles the compilation? #

For your use case, two solid options fit the bill:

• Dart Sass CLI: Perfect for basic setups, no extra configuration files needed.
• Gulp: A task runner that adds automation (like auto-watching files, generating both compressed and uncompressed versions) – ideal if you plan to expand your build process later.

We'll cover both approaches below.

2. How to configure the tool to compile from resources/assets/sass/ to public/build/css/? #

Option A: Using Dart Sass CLI (Basic, No Build Tool)

First, create a main entry file (e.g., resources/assets/sass/main.scss) – this will be the file you compile to get a single merged CSS file. Import all your SCSS files (including Bootstrap) into this main file:

// Import Bootstrap Sass (adjust the path to match your bower_components location)
@import "../../bower_components/bootstrap-sass/assets/stylesheets/bootstrap";

// Import your custom SCSS files
@import "./variables"; // Your custom Bootstrap overrides
@import "./components/navbar"; // Your own UI components
@import "./pages/home"; // Page-specific styles

Then run the compilation command:

• To compile once: sass resources/assets/sass/main.scss public/build/css/main.css
• To auto-recompile on changes: sass --watch resources/assets/sass/main.scss:public/build/css/main.css

If you want to compile individual SCSS files (not merged into one), run:
sass --watch resources/assets/sass:public/build/css
This will compile every .scss file in the source directory to a corresponding .css file in the target directory.

Option B: Using Gulp (Automated Build)

1. Initialize npm in your project directory: npm init -y
2. Install dependencies: npm install gulp gulp-sass sass --save-dev
3. Create a gulpfile.js in your project root with this configuration:

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));

// Compile SCSS to uncompressed, human-readable CSS
function compileUncompressed() {
  return gulp.src('resources/assets/sass/main.scss')
    .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))
    .pipe(gulp.dest('public/build/css'));
}

// Auto-watch for changes and recompile automatically
function watchFiles() {
  gulp.watch('resources/assets/sass/**/*.scss', compileUncompressed);
}

// Default task: run compilation + start watcher
exports.default = gulp.series(compileUncompressed, watchFiles);

4. Run Gulp: Execute gulp in your terminal – it will compile your SCSS and keep watching for changes.

3. Do I need to configure each new .scss file, or just add it to the specified directory? #

• If using a main entry file (merged CSS): You only need to @import the new file into your main.scss – no changes to the compilation command or Gulp config required.
• If compiling individual files: Just drop the new .scss file into resources/assets/sass/ – the watch command will automatically compile it to public/build/css/ with the same filename.

Bonus: How to toggle between compressed and uncompressed output? #

With Dart Sass CLI

• Uncompressed (human-readable):
  sass resources/assets/sass/main.scss public/build/css/main.css --style expanded
• Compressed (minified for production):
  sass resources/assets/sass/main.scss public/build/css/main.min.css --style compressed
• You can also watch with a specific style:
  sass --watch resources/assets/sass/main.scss:public/build/css/main.css --style expanded

With Gulp

Update your gulpfile.js to add a compressed compilation task:

// Compile to compressed, minified CSS
function compileCompressed() {
  return gulp.src('resources/assets/sass/main.scss')
    .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
    .pipe(gulp.dest('public/build/css'));
}

// Add tasks to run individually
exports.uncompressed = compileUncompressed;
exports.compressed = compileCompressed;
exports.watch = watchFiles;

Now you can run:

• gulp uncompressed for expanded CSS
• gulp compressed for minified CSS
• gulp watch to auto-recompile when files change

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