我想在我的react应用程序中包含自定义css文件。我的webpack.config.js文件如下所示:
var path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'public')
},
watch: true,
module:{
loaders: [
{
test:/\.js$/,
exclude:/node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-1']
}
},
{
test: /\.less$/,
loader: 'style!css!less'
}
]
}
}
使用style.css文件的组件如下:
import React, { Component } from 'react';
import { Row, Col, Grid, Button } from 'react-bootstrap';
import styles from '../style.css';
const ProductList = ({ products }) => (
<Row>
<Col xs={12} md={4}>
{
products.map((product, index) => {
return(
<div key={index} className={styles.test}>
<img src={product.url} />
<div className="caption">
{product.title}
</div>
<Button bsStyle="primary">Add to Cart</Button>
</div>
)
})
}
</Col>
</Row>
)
export default ProductList;
导入style.css文件并使用该类后,会抛出以下错误:
ERROR in ./src/style.css
Module parse failed: E:\projects\simple-shopping-cart\src\style.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .test {
| background-color: blue;
| background: blue;
@ ./src/components/product-list.js 13:13-36
@ ./src/components/index.js
@ ./src/containers/Products.js
@ ./src/index.js
有人能让我知道在react中导入css文件的正确方法吗?
由于
答案 0 :(得分:1)
请改为尝试:
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
}
“-loader”现在是强制性的