我想在用Typescript编写的React应用程序中将css- loader与webpack的’modules’选项一起使用。这个例子是我的起点(他们使用Babel,webpack和React)。
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")()] } }
这是我想用随附的CSS文件设置样式的React组件:
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; }
说明无论我在做什么(试图改变进口语法,试图声明“要求”为TS-装载机,在这里,我总是得到:
未捕获的错误:找不到模块“ ../../../css/tree.css”
在运行时
错误TS2307:找不到模块“ ../../../css/tree.css”。
由TS编译器。发生了什么?在我看来,css-loader甚至没有发出ICSS?还是ts-loader出现错误?
import对TypeScript具有特殊意义。这意味着TypeScript将尝试加载并了解正在导入的内容。正确的方法是require像您提到的那样进行定义,var而不是import:
import
require
var
var styles = require('../../../css/tree.css')`