在Webpack2中使用TypeScript加载SASS模块

我有一个使用TypeScript,ReactJS和SASS设置的简单项目,并希望使用Webpack将其全部捆绑.有很多关于如何使用Javascript和常规旧CSS实现此目的的文档.但是,我找不到任何组合我需要的加载器的文档,并使用Webpack 2语法(而不是加载器的原始Webpack语法).因此,我不确定如何创建正确的配置.

你可以webpack.config.js在这里找到我的文件.我如何修改配置以便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文件.

它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" }
    ]
}