Verwenden Sie CSS-Module in React-Komponenten mit Typescript, das von webpack erstellt wurde.
Ich möchte den CSS-Loader mit der Option 'modules' von webpack in einer in Typescript geschriebenen React-Anwendung verwenden.Dieses Beispiel war mein Ausgangspunkt (sie benutzen Babel, Webpack und React).
webpack config
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")()]
}
}
Dies ist eine React-Komponente, die ich mit einer zugehörigen CSS-Datei formatieren möchte:
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;
}
Egal was ich tue (versuchte die Importsyntax zu ändern, versuchte das 'Erfordernis' für ts-loader zu deklarieren, beschriebenHie, Ich bekomme immer
Uncaught Error: Modul "../../../css/tree.css"@ kann nicht gefunden werd
at Laufzeit und
Fehler TS2307: Modul '../../../css/tree.css'@ kann nicht gefunden werd
,von dem TS-Compiler. Was ist los? Scheint mir, dass CSS-Loader nicht einmal ICSS ausstrahlt? Oder verhält sich der ts-loader falsch?