Utilice los módulos CSS en los componentes React con Typecript creado por webpack
Quiero usar el css-loader con la opción 'módulos' de webpack en una aplicación React escrita en Typecript.Este ejemplo fue mi punto de partida (están usando Babel, webpack y React).
configuración del paquete web
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 es un componente React que quiero diseñar con un archivo CSS que lo acompaña:
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;
}
No importa lo que esté haciendo (intenté cambiar la sintaxis de importación, intenté declarar el 'require' para ts-loader, descritoaquí, Siempre obtengo:
Error no detectado: no se puede encontrar el módulo "../../../css/tree.css"
en tiempo de ejecución y
error TS2307: No se puede encontrar el módulo '../../../css/tree.css'.
,por el compilador de TS. ¿Qué esta pasando? ¿Me parece que css-loader ni siquiera emite ICSS? ¿O es que ts-loader se comporta mal?