样式加载器，使用webpack键入CSS模块加载器

Question

我想使用样式加载器通过webpack将scss加载到TypeScript React组件中。当仅使用CSS时，我有以下规则集：

{ test: /\.css$/, loader: "style-loader" },
{ test: /\.css$/, loader: "typings-for-css-modules-loader?modules&namedExport" }

它可以正常工作。

但是当我尝试使用sass时（遵循软件包页面上的指南），它变成：

{ test: /\.css$/, loader: "style-loader" },
{ test: /\.css$/, loader: "typings-for-css-modules-loader?modules&namedExport" },
{ test: /\.scss$/, loader: "typings-for-css-modules-loader?modules&namedExport&sass" },

那是行不通的，因为我在结果中看不到任何样式标签。

我是否缺少某些东西或不是真的了解它的工作原理？

Answer 1

我发现以下两个修改允许加载sass模块。首先是将style-loader测试更改为也包含scss文件。第二种是添加sass-loader作为scss文件的初始加载器。您可能需要安装sass-loader软件包。所以现在的规则是：

{ test: /\.(css|scss)$/, loader: "style-loader" },
{ test: /\.css$/, loader: "typings-for-css-modules-loader?modules&namedExport" },
{ test: /\.scss$/, loader: "typings-for-css-modules-loader?modules&namedExport&sass" },
{ test: /\.scss$/, loader: "sass-loader" }