gpt4 book ai didi

css - gulp + webpack + css-loader + typescript : "cannot find module"

转载 作者:技术小花猫 更新时间:2023-10-29 11:18:08 24 4
gpt4 key购买 nike

我想使用 css-loader:local()在我的开发设置中运行。

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

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

错误: 从“./sidebar.css”导入类名;

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

解释我的设置:

  1. .tsx 文件通过 gulp-typescript (ES5) 编译成 commonjs 模块
  2. commonjs 模块通过 webpack 编译并压缩为 JS

sidebar.tsx(如果重要,则导入到 app.tsx 中)

从“./sidebar.css”导入类名;

sidebar.css

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

gulpfile.js

Gulp 任务将 .tsx 文件编译为 commonJS 模块(当然在 webpack-task 之前运行):

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 声明为一个模块?

最佳答案

typescript 无法加载或理解 css 文件,但它可以与 webpack 一起使用。要告诉 TypeScript 存在以 *.ts 以外的结尾结尾的文件,您必须为相应的文件类型声明一个通配符模块。只需将其放入您包含在元素中的 *.d.ts 文件即可。

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

关于css - gulp + webpack + css-loader + typescript : "cannot find module",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33257025/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com