在带有Typescript的React组件中使用CSS模块
在带有Typescript的React组件中使用CSS模块
提问于 2016-01-26 20:42:18
我想在一个用Typescript编写的React应用程序中使用带有'modules‘选项的css-loader。This example是我的起点(他们用的是巴别塔、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")()]
}
}这是一个React组件，我想用一个附带的CSS文件来样式化它：
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 = Treetree.css
.h3{
color: red;
}无论我在做什么(尝试更改导入语法，尝试为ts-loader声明'require‘，描述here，我总是得到：
未捕获错误:无法找到模块“../css/tree.css”
在运行时和
错误树:找不到模块‘../css/TS2307’。
由TS编译器编写。发生什么事了？在我看来css加载器甚至不能发射ICSS？或者是ts-loader行为错误？
回答 5
Stack Overflow用户
回答已采纳
发布于 2016-01-26 21:40:01
import对TypeScript有特殊的意义。这意味着TypeScript将尝试加载并理解正在导入的内容。正确的方法是像您提到的那样定义require，然后使用var而不是import
var styles = require('../../../css/tree.css')`Stack Overflow用户
发布于 2016-03-20 05:35:05
- Use‘>("../../../css/tree.css").
’，
- 声明‘require<’为泛型，使用< any >类型：require< any any
*.d.ts文件
declare var require: {
<T>(path: string): T;
(paths: string[], callback: (...modules: any[]) => void): void;
ensure: (paths: string[], callback: (require: <T>(path: string) => T) => void) => void;
}; 包含组件的*.tsx文件
const styles = require<any>("../../../css/tree.css");
...
<h3 className={styles.h3}>Components</h3>我知道这个问题已经得到了回答，但在我意识到我需要使用泛型类型规范之前，我一直在为这个问题而苦苦挣扎，如果没有泛型类型规范，我就无法访问CSS文件的内容。(我收到错误:类型‘{}’上不存在属性'h3‘。)
Stack Overflow用户
发布于 2016-01-26 21:28:44
我也遇到过类似的问题。对我来说，works导入：
import '../../../css/tree.css';像任何其他普通导入一样，Webpack对此进行了更改。它会将其更改为
__webpack_require__(id)一个缺点是你失去了对样式变量的控制。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35014132
复制相关文章
相似问题