Flutter样式预处理器插件sass_builder的使用

发布于 1周前 作者 vueper 来自 Flutter

Flutter样式预处理器插件sass_builder的使用

sass_builder 是一个用于将SASS文件转换为CSS文件的Dart构建器，它依赖于 build 包和Dart版本的 sass 实现。通过它可以方便地在Flutter Web项目中使用SASS预处理样式。

使用方法

1. 修改 pubspec.yaml

首先，在项目的根目录下编辑 pubspec.yaml 文件，添加对 sass_builder 和 build_runner 的开发依赖：

dependencies:
  # (可选) 依赖提供SASS源码的最新版本包
  bootstrap_sass: any
dev_dependencies:
  # 更新到最新版本
  sass_builder: ^2.1.2
  build_runner: ^2.1.7

2. 创建 SASS 文件

接下来创建一个名为 main.scss 的主SASS文件，位于 web 目录下，并编写一些简单的样式规则：

@use "sub";
@use "package:bootstrap_sass/scss/variables" as bootstrap;

.a {
  color: blue;
}

.c {
  color: bootstrap.$body-color;
}

同时，还需要创建一个名为 _sub.scss 的辅助文件，同样放置在 web 目录内：

.b {
  color: red;
}

3. 编辑 HTML 文件

确保你的HTML文档正确引用了生成后的CSS文件。例如，修改 web/index.html 如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sample</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
<div class="a">Some Text</div>
<div class="b">Some Text</div>
<div class="c">Some Text</div>
</body>
</html>

4. 构建与运行

最后，通过命令行工具执行以下命令来启动服务端并编译SASS文件：

dart run build_runner serve

完成后，打开浏览器访问 http://localhost:8080 即可看到效果。此时，应该可以在 web/main.css 中找到如下内容：

.b {
  color: red;
}

.a {
  color: blue;
}

.c {
  color: #373a3c;
}

构建器选项配置

为了更好地控制构建过程，可以对 sass_builder 进行额外配置。具体来说，可以通过 build_config 文件指定一些参数，比如输出格式或是否生成source map等。

输出格式 (outputStyle)

  • 支持 expanded 或 compressed 两种模式，默认情况下，开发环境采用 expanded 格式，而发布环境下则会自动切换至 compressed 模式。

Source Map (sourceMaps)

  • 决定是否为编译后的CSS文件生成对应的source map，默认在开发环境中开启此功能，在生产环境中关闭。

示例：强制压缩输出（即使是在开发模式下）

targets:
  $default:
    builders:
      sass_builder:
        options:
          outputStyle: compressed

示例代码补充说明

如果你想查看具体的构建结果而不直接启动服务器，还可以使用 build_runner 提供的 build 命令配合 --output 参数指定输出路径。需要注意的是，如果目标文件夹已存在，则其内部的所有文件都会被删除，请谨慎操作。

$ dart run build_runner build --output web:out

这样，所有的输出文件将会保存到 out/ 文件夹中，方便进行调试和检查。


更多关于Flutter样式预处理器插件sass_builder的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter样式预处理器插件sass_builder的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter项目中，使用Sass（Syntactically Awesome Stylesheets）可以让我们更方便地编写和维护样式代码。sass_builder插件允许我们在Flutter项目中实时编译Sass文件为CSS文件，进而在Flutter中使用这些样式。以下是如何在Flutter项目中配置和使用sass_builder插件的详细步骤，包括相关的代码案例。

1. 添加依赖

首先，你需要在pubspec.yaml文件中添加sass_builder依赖：

dependencies:
  flutter:
    sdk: flutter
  sass_builder: ^2.1.4  # 确保使用最新版本

dev_dependencies:
  build_runner: ^2.0.4  # Flutter构建工具
  flutter_tools:
    sdk: flutter

2. 创建Sass文件

在你的Flutter项目根目录下创建一个styles文件夹，并在其中创建一个styles.scss文件。例如：

// styles/styles.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;

body {
  font-family: Arial, sans-serif;
  background-color: $primary-color;
  color: $secondary-color;
}

.button {
  background-color: $secondary-color;
  color: $primary-color;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: darken($secondary-color, 10%);
  }
}

3. 配置build.yaml

在项目的根目录下创建一个build.yaml文件，并添加以下内容来配置sass_builder：

targets:
  $default:
    builders:
      sass_builder:
        enabled: true
        options:
          include: ["styles/**/*.scss"]

4. 在Flutter中使用编译后的CSS

由于sass_builder会将Sass文件编译为CSS文件，并输出到build目录中，你需要在Flutter中引用这些编译后的CSS文件。然而，Flutter本身并不直接支持CSS文件，通常的做法是将Sass编译后的样式转换为Dart代码或直接在Flutter的样式系统中使用等效的样式。

一个替代方案是使用flutter_sass_compiler（如果它支持你的需求）或者手动将Sass样式转换为Flutter的TextStyle、Color等。不过，由于Flutter的样式系统与CSS有所不同，直接转换可能并不总是可行。

下面是一个如何在Flutter中手动应用类似样式的例子（不直接通过Sass文件，但展示了如何应用等效样式）：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final primaryColor = Color(0xFF3498DB);
    final secondaryColor = Color(0xFF2ECC71);

    return MaterialApp(
      home: Scaffold(
        backgroundColor: primaryColor,
        appBar: AppBar(
          title: Text('Sass in Flutter', style: TextStyle(color: secondaryColor)),
        ),
        body: Center(
          child: TextButton(
            onPressed: () {},
            child: Text('Button', style: TextStyle(color: primaryColor)),
            style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all(secondaryColor),
              overlayColor: MaterialStateProperty.resolveWith<Color?>(
                (Set<MaterialState> states) {
                  if (states.contains(MaterialState.pressed)) {
                    return secondaryColor.withAlpha(180); // Darken effect
                  }
                  return null; // Use the component's default.
                },
              ),
              shape: MaterialStateProperty.all(
                RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(5.0),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

注意

  • Flutter本身并不直接支持CSS，因此你需要将Sass编译后的样式转换为Flutter的样式系统。
  • sass_builder主要用于编译Sass文件，而不是直接在Flutter中使用Sass样式。
  • 如果你想在Flutter中使用更复杂的样式系统，可以考虑使用像styled_widget或flutter_styled_components这样的库，它们提供了更接近于CSS的样式管理方式。

希望这些步骤和代码示例能帮助你在Flutter项目中更好地使用Sass和sass_builder插件。

回到顶部