[英]Include css/style loaders in webpack react application
我想在我的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文件的正确方法吗?
谢谢
尝试以下方法:
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
}
现在必须使用“ -loader”
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.