javascript - 在 Webpack 2 中使用 TypeScript 加载 SASS 模块

Question

我有一个使用 TypeScript、ReactJS 和 SASS 设置的简单项目，我想使用 Webpack 将其全部捆绑在一起。关于如何使用 JavaScript 和常规的旧 CSS 实现这一点的文档很多。但是，我找不到任何结合了我需要的加载器并使用 Webpack 2 语法(而不是加载器的原始 Webpack 语法)的文档。因此，我不确定如何创建正确的配置。

你可以找到我的webpack.config.js file here . 我该如何修改配置，以便 TypeScript 接受我的 SCSS 模块，并让 Webpack 正确地将我的 SCSS 与我的 TypeScript 捆绑在一起？

这也可能有帮助:当我此时运行 Webpack 时，出现以下错误:

ERROR in ./node_modules/css-loader!./node_modules/typings-for-css-modules-loader/lib?{"namedExport":true,"camelCase":true}!./node_modules/sass-loader/lib/loader.js!./src/raw/components/styles.scss
Module build failed: Unknown word (1:1)

> 1 | exports = module.exports = require("../../../node_modules/css-loader/lib/css-base.js")(undefined);
    | ^
  2 | // imports
  3 |
  4 |

 @ ./src/raw/components/styles.scss 4:14-206
 @ ./src/raw/components/greetings/greetings.tsx
 @ ./src/raw/index.tsx
 @ multi ./src/raw/index.tsx

ERROR in [at-loader] ./src/raw/components/greetings/greetings.tsx:3:25
    TS2307: Cannot find module '../styles.scss'.

请注意，./src/raw/index.tsx 是我的应用程序的入口点，./src/raw/components/greetings/greeting.tsx 是我唯一的 React 组件，./src/raw/components/styles.scss 是我唯一的 SCSS 文件。

Answer 1

typings-for-css-modules-loader 是 css-loader 的直接替代品(从技术上讲，它在幕后使用 css-loader)这意味着它采用 CSS 并将其转换为 JavaScript。您还使用了 css-loader , 失败是因为它收到 JavaScript，但收到预期的 CSS(因为 JavaScript 不是有效的 CSS，它无法解析)。

此外，您没有使用 CSS 模块，因为您没有设置 modules: true CSS 加载器上的选项(或 typings-for-css-modules-loader ，将其传递给 css-loader )。

你的 .scss规则应该是:

{
    test: /\.scss$/,
    include: [
        path.resolve(__dirname, "src/raw")
    ],
    use: [
        { loader: "style-loader" },
        {
            loader: "typings-for-css-modules-loader",
            options: {
                namedexport: true,
                camelcase: true,
                modules: true
            }
        },
        { loader: "sass-loader" }
    ]
}