[英]gulp + webpack + css-loader + typescript: “cannot find module”
I want to use css-loader with :local()
function in my dev-setup. 我想在我的dev-setup中使用css-loader和
:local()
函数。
No error: import './sidebar.css';
没有错误:
import './sidebar.css';
it compiles without problem, but then I dont know how to access the local classnames inside my .tsx
file. 它编译没有问题,但后来我不知道如何访问我的
.tsx
文件中的本地类名。
Error: import classNames from './sidebar.css';
错误:
import classNames from './sidebar.css';
Here I get: error TS2307: Cannot find module './sidebar.css'
我得到:
error TS2307: Cannot find module './sidebar.css'
Explaining my setup: 解释我的设置:
.tsx
files are compiled to commonjs modules via gulp-typescript (ES5) .tsx
文件通过gulp-typescript(ES5)编译到commonjs模块 sidebar.tsx (gets imported in app.tsx
if that matters) sidebar.tsx (如果重要的话,在
app.tsx
导入)
import classNames from './sidebar.css';
sidebar.css sidebar.css
.sl-sidebar {
background-color: yellow;
}
gulpfile.js gulpfile.js
Gulp task compiling .tsx
files to commonJS modules (runs before webpack-task of course): 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));
});
My gulp-webpack task: 我的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);
}
});
});
What am I doing wrong? 我究竟做错了什么?
Edit: I just found this: https://github.com/Microsoft/TypeScript/issues/2709 but I dont quite understand it. 编辑:我刚刚发现这个: https : //github.com/Microsoft/TypeScript/issues/2709但我不太明白。 Does it mean I have to declare my CSS as a module?
这是否意味着我必须将我的CSS声明为模块?
typescript cannot load or understand css files, but it will work with webpack. typescript无法加载或理解css文件,但它可以与webpack一起使用。 To tell TypeScript that there are files with an ending other than *.ts you have to declare a wildcard module for the according file type.
要告诉TypeScript有些文件的结尾不是* .ts,您必须为相应的文件类型声明通配符模块。 Just put it in a *.d.ts file which you include in the project.
只需将其放在项目中包含的* .d.ts文件中即可。
// declaration.d.ts
declare module '*.css' {
const content: any;
export default content;
}
To load non-ts resources just declare the require
function and use the imported resources (as any
). 要加载非ts资源,只需声明
require
函数并使用导入的资源(如果any
)。
Documentation : https://github.com/TypeStrong/ts-loader#code-splitting-and-loading-other-resources 文档: https : //github.com/TypeStrong/ts-loader#code-splitting-and-loading-other-resources
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.