webpack需通过loader链处理sass/less：先编译为css，再转js模块或提取文件；typescript项目中可与.ts共存打包，配置module.rules按后缀匹配loader，生产环境推荐minicssextractplugin分离css，ts中直接import样式文件并可选声明类型。
Webpack 本身不直接识别 Sass 或 Less 文件，需要靠 loader 链式处理：先把预处理器语法编译成 CSS，再把 CSS 转成 JS 模块或提取为独立文件。TypeScript 项目中，只要 loader 配置正确，Sass/Less 就能和 .ts 文件共存、一起被 Webpack 打包。
安装对应依赖
区分开发与生产环境，但安装命令基本一致：
-
Less：运行
npm install --save-dev less less-loader css-loader style-loader -
Sass（.scss/.sass）：运行
npm install --save-dev sass sass-loader css-loader style-loader（推荐用sass而非node-sass，后者已停更）
配置 module.rules 处理规则
在 webpack.config.js 的 module.rules 中添加对应正则匹配和 loader 链。注意顺序：loader 执行从右往左（即最后写的先执行）。
-
Less 示例：
{ test: /\.less$/i, use: ['style-loader', 'css-loader', 'less-loader'] } -
Sass 示例：
{ test: /\.(scss|sass)$/i, use: ['style-loader', 'css-loader', 'sass-loader'] }
如果使用 TypeScript，确保已有 ts-loader 或 babel-loader 处理 .ts 文件，它和样式 loader 互不干扰，各自匹配对应后缀。
分离 CSS 到独立文件（生产环境推荐）
开发时用 style-loader 把样式注入 <style></style> 标签；上线前建议提取为 .css 文件，提升加载性能。
- 安装插件：
npm install --save-dev mini-css-extract-plugin - 配置替换 loader：
{ test: /\.less$/i, use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'] }
并在plugins中加入：new MiniCssExtractPlugin({ filename: 'styles/[name].[contenthash].css' })
在 TypeScript 中引入样式文件
无需额外声明，直接 import 即可，Webpack 会按 rules 匹配处理：
import './styles/main.scss';import '../assets/theme.less';
注意：TS 编译器默认不校验 .scss 或 .less 导入，若想避免拼写错误，可加一个空的 declarations.d.ts 声明：
declare module '*.less' { const content: Record
