Gulp + Webpack + CSS-loader + TypeScript: "无法找到模块"

Question

我想在我的开发环境中使用 css-loader 和 :local() 函数。

没有错误： import './sidebar.css';

它编译没有问题，但是我不知道如何在我的.tsx文件中访问本地类名。

错误： import classNames from './sidebar.css';

这里我得到： error TS2307: Cannot find module './sidebar.css'

解释我的设置：

1. .tsx 文件通过 gulp-typescript（ES5）编译为 commonjs 模块
2. commonjs 模块通过 webpack 编译和压缩为 JS

sidebar.tsx（如果有影响，则被导入到app.tsx中）

import classNames from './sidebar.css';

sidebar.css

.sl-sidebar {
  background-color: yellow;
}

gulpfile.js

Gulp任务将.tsx文件编译为CommonJS模块（当然在webpack任务之前运行）：

gulp.task('gui-tsx', function () {
    return gulp.src(config.guiTsxPath + '**/*.tsx')
        .pipe(ts({
            jsx: 'react',
            outDir: config.guiCompiledPath,
            module: 'commonjs',
            target: 'ES5'
        }))
        .pipe(gulp.dest(config.guiCompiledPath));
});

我的gulp-webpack任务：

gulp.task('gui-webpack', function () {
    webpack({
        bail: false,
        debug: true,
        entry: './' + config.guiCompiledPath + 'app.js',
        output: {
            filename: "gui.js",
            path: './' + config.pubPath + 'js'
        },
        devtool: "#inline-source-map",
        plugins: [
            new webpack.optimize.UglifyJsPlugin({
                compress: {
                    warnings: false
                },
                output: {
                    comments: false,
                    semicolons: true
                },
                sourceMap: true
            })
        ],
        module: {
            loaders: [ {
                test: /\.css$/,
                loader: 'style-loader!css-loader?modules'
            }]
        }

    }, function (err, stats) {
        if (stats.compilation.errors.length > 0) {
            console.log(stats.compilation.errors[0].message);
        }
    });
});

我做错了什么？

编辑：我刚发现这个：https://github.com/Microsoft/TypeScript/issues/2709 但是我不太理解它的意思。这是否意味着我必须将我的CSS声明为模块？

- Felix Hagspiel

---

你可以使用webpack来转译typescript，无需使用gulp。请查看该文章以获取更多细节：http://www.jbrantly.com/typescript-and-webpack/ - TSV

我知道，但这并不能解决问题。使用普通的webpack也是一样的。 - Felix Hagspiel

Answer 1

TypeScript无法加载或理解CSS文件，但它可以与Webpack配合使用。要告诉TypeScript存在以*.ts以外的结束方式的文件，您需要为相应的文件类型声明通配符模块。只需将其放在包含在项目中的*.d.ts文件中即可。

// declaration.d.ts
declare module '*.css' {
    const content: any;
    export default content;
}

- Kalle

Answer 2

加载非 TypeScript 资源，只需声明 require 函数并使用导入的资源（作为 any）。

文档：https://github.com/TypeStrong/ts-loader#code-splitting-and-loading-other-resources

- basarat

---

我正在尝试像 https://github.com/css-modules/webpack-demo/tree/master/src/components 中那样使用CSS，因此我需要将导入的CSS分配给一个变量。你能举个例子来说明如何实现吗？ - Shady