支持SASS样式

note

本插件仅支持webpack引擎。vite引擎下自带该插件的功能。

插件说明

增加对SASS文件的处理能力。

这个插件会做以下几件事：

1. 通过sass-loader处理.sass、.scss文件。
2. 支持CSS Modules、样式提取为单独.css文件等功能。

使用

安装

npm i -D @reskript/plugin-sass

增加插件

// reskript.config.ts
import {configure} from '@reskript/settings';
import sass = require('@reskript/plugin-sass');


export default configure(
    'webpack',
    {
        plugins: [
            sass({/* 配置 */}),
        ],
    }
);

配置

interface SassLoaderOptions {
    implementation?: unknown;
    sassOptions?: Record<string, unknown>;
    additionalData?: string | ((content: string, loaderContext: unknown) => string);
}

function sass(options?: SassLoaderOptions): SettingsPlugin;

配置的各个选项请参考sass-loader的说明。仅支持上述的3个配置，其余配置不支持自定义。

样式处理逻辑

默认处理.sass和.scss文件，且按以下逻辑处理：

1. 在项目的源码（通常为src目录）下后缀为.s[ac]ss的，启用CSS Modules，且启用样式函数功能。
2. 后缀为.global.s[ac]ss的，不启用CSS Modules。
3. 第三方（externals和node_modules下）的，不启用CSS Modules。

以下参数会影响到默认行为：

• build.style.module：设置启用CSS Modules的文件规则。
• build.style.extract：控制是否抽取为独立的.css文件。

具体请参阅构建配置章节了解这些配置的具体作用。