Use módulos CSS nos componentes React com o TypeScript criado pelo webpack
Eu quero usar o css-loader com a opção 'modules' do webpack em um aplicativo React escrito em Typescript.Este exemplo foi o meu ponto de partida (eles estão usando Babel, webpack e React).
configuração do webpack
var webpack=require('webpack');
var path=require('path');
var ExtractTextPlugin=require("extract-text-webpack-plugin");
module.exports={
entry: ['./src/main.tsx'],
output: {
path: path.resolve(__dirname, "target"),
publicPath: "/assets/",
filename: 'bundle.js'
},
debug: true,
devtool: 'eval-source-map',
plugins: [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({minimize: true})
],
resolve: {
extensions: ['', '.jsx', '.ts', '.js', '.tsx', '.css', '.less']
},
module: {
loaders: [
{
test: /\.ts$/,
loader: 'ts-loader'
},
{
test: /\.tsx$/,
loader: 'react-hot!ts-loader'
}, {
test: /\.jsx$/,
exclude: /(node_modules|bower_components)/,
loader: "react-hot!babel-loader"
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: "babel-loader"
}, {
test: /\.css/,
exclude: /(node_modules|bower_components)/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader')
}
]
},
plugins: [
new ExtractTextPlugin("styles.css", {allChunks: true})
],
postcss: function() {
return [require("postcss-cssnext")()]
}
}
Este é um componente React que eu quero estilizar com um arquivo CSS que o acompanha:
import React = require('react');
import styles = require('../../../css/tree.css')
class Tree extends React.Component<{}, TreeState> {
...
render() {
var components = this.state.components
return (
<div>
<h3 className={styles.h3} >Components</h3>
<div id="tree" className="list-group">
...
</div>
</div>
)
}
}
export = Tree
tree.css
.h3{
color: red;
}
Não importa o que eu esteja fazendo (tentei mudar a sintaxe de importação, tentei declarar o 'require' do ts-loader, descritoaqui, Eu sempre recebo:
Erro não capturado: Não foi possível encontrar o módulo "../../../css/tree.css"
em tempo de execução e
erro TS2307: Não foi possível encontrar o módulo '../../../css/tree.css'.
,pelo compilador TS. O que está acontecendo? Parece-me que o css-loader nem está emitindo ICSS? Ou o ts-loader está se comportando errado?