我想在我的开发环境中使用 css-loader 和
我的gulp-webpack任务:
:local()
函数。
没有错误: import './sidebar.css';
它编译没有问题,但是我不知道如何在我的.tsx
文件中访问本地类名。
错误: import classNames from './sidebar.css';
这里我得到: error TS2307: Cannot find module './sidebar.css'
解释我的设置:
.tsx
文件通过 gulp-typescript(ES5)编译为 commonjs 模块- 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声明为模块?