知识库

Appearance

Return to top
On this page

Sass 安装与配置

本章将详细介绍如何安装和配置Sass，以及如何将其集成到您的开发工作流中。

安装Sass

使用npm安装

推荐使用npm来安装Sass，这是最常用的方法：

bash
# 全局安装
npm install -g sass

# 项目中安装（推荐）
npm install sass --save-dev

使用yarn安装

bash
yarn add sass --dev

使用Dart Sass（官方推荐）

Dart Sass是Sass的参考实现，性能更好且功能更完整：

bash
npm install -g sass

使用CDN

如果只想在浏览器中快速测试Sass，可以使用CDN：

html
<script src="https://cdn.jsdelivr.net/npm/sass@1.69.5/dist/sass.js"></script>

配置Sass

基本配置选项

Sass编译器支持多种配置选项：

bash
# 基本编译命令
sass input.scss output.css

# 指定输出样式
sass --style compressed input.scss output.css

# 监听文件变化
sass --watch input.scss output.css

# 指定源映射
sass --sourcemap input.scss output.css

# 启用严格缩进
sass --indent input.scss output.css

配置选项详解

输出样式 (style)

  • nested：嵌套格式（默认）
  • expanded：展开格式
  • compact：紧凑格式
  • compressed：压缩格式
bash
# 压缩输出
sass --style compressed input.scss output.css

源映射 (sourcemap)

生成源映射文件，便于调试：

bash
# 生成源映射
sass --sourcemap input.scss output.css

# 不生成源映射
sass --no-sourcemap input.scss output.css

监听模式 (watch)

监听文件变化并自动编译：

bash
# 监听单个文件
sass --watch input.scss output.css

# 监听整个目录
sass --watch scss:css

# 监听多个目录
sass --watch scss:css --watch theme:dist

项目配置文件

创建配置文件

在项目根目录创建.sassrc文件：

json
{
  "includePaths": ["node_modules", "bower_components"],
  "sourceMap": true,
  "outputStyle": "expanded",
  "indentType": "tab",
  "indentWidth": 1,
  "linefeed": "lf"
}

package.json配置

在package.json中添加脚本：

json
{
  "scripts": {
    "sass": "sass scss/main.scss css/main.css",
    "sass:watch": "sass --watch scss/main.scss css/main.css",
    "sass:build": "sass --style compressed scss/main.scss css/main.css"
  },
  "devDependencies": {
    "sass": "^1.69.5"
  }
}

与构建工具集成

Webpack配置

安装必要的加载器：

bash
npm install sass-loader css-loader style-loader --save-dev

配置webpack.config.js：

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.(scss|css)$/,
        use: [
          'style-loader',    // 将JS字符串注入到DOM中
          'css-loader',      // 解析CSS并添加依赖
          'sass-loader'      // 将Sass编译为CSS
        ]
      }
    ]
  }
};

Gulp配置

安装Gulp和相关插件：

bash
npm install gulp gulp-sass sass --save-dev

创建gulpfile.js：

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

gulp.task('sass', function() {
  return gulp.src('src/scss/**/*.scss')
    .pipe(sass({
      outputStyle: 'compressed',
      sourceMap: true
    }).on('error', sass.logError))
    .pipe(gulp.dest('dist/css'));
});

gulp.task('sass:watch', function() {
  gulp.watch('src/scss/**/*.scss', gulp.series('sass'));
});

Grunt配置

安装Grunt和相关插件：

bash
npm install grunt grunt-sass --save-dev

配置Gruntfile.js：

javascript
module.exports = function(grunt) {
  grunt.initConfig({
    sass: {
      dist: {
        options: {
          style: 'compressed',
          sourcemap: 'auto'
        },
        files: {
          'dist/css/main.css': 'src/scss/main.scss'
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-sass');
  grunt.registerTask('default', ['sass']);
};

编辑器配置

VS Code配置

安装Sass扩展并配置settings.json：

json
{
  "sass.includeLineComments": true,
  "sass.compilerPath": "./node_modules/sass/sass",
  "files.associations": {
    "*.scss": "scss"
  }
}

WebStorm配置

  1. 打开Settings (Ctrl+Alt+S)
  2. 导航到 Languages & Frameworks > Style Sheets > Sass/SCSS
  3. 设置Sass executable路径
  4. 配置Watchers

环境变量配置

设置PATH环境变量

确保Sass命令可以在任何目录下执行：

bash
# Windows
set PATH=%PATH%;C:\Users\YourName\AppData\Roaming\npm

# macOS/Linux
export PATH=$PATH:~/.npm-global/bin

高级配置

自定义函数和混合宏

创建全局配置文件：

scss
// _config.scss
$primary-color: #3498db !default;
$font-family: 'Helvetica Neue', Arial, sans-serif !default;
$breakpoints: (
  "small": 600px,
  "medium": 900px,
  "large": 1200px
) !default;

// 全局混合宏
@mixin respond-to($breakpoint) {
  @media (min-width: map-get($breakpoints, $breakpoint)) {
    @content;
  }
}

性能优化配置

javascript
// sass.config.js
module.exports = {
  implementation: require('sass'),
  sassOptions: {
    includePaths: ['./src/scss'],
    outputStyle: 'compressed',
    sourceMap: true,
    sourceMapEmbed: true,
    sourceMapContents: true,
    sourceMapRoot: '../',
    indentWidth: 2,
    quietDeps: true,
    verbose: false
  }
};

故障排除

常见安装问题

  1. 权限问题

    bash
    # 使用--unsafe-perm标志（macOS/Linux）
npm install -g sass --unsafe-perm

# 或使用npx运行
npx sass input.scss output.css

  2. 版本冲突

    bash
    # 清理npm缓存
npm cache clean --force

# 重新安装
npm uninstall sass
npm install sass --save-dev

  3. 路径问题

    bash
    # 检查Sass是否正确安装
sass --version

通过正确配置Sass，您可以建立一个高效的开发工作流，充分利用Sass的强大功能来提升CSS开发效率。