0
我有一個webpack和我的反應應用程序的問題。我正在開發我的應用程序,但是當我運行我的包腳本運行webpack時,它不會生成輸出css。我的webpack不生成我的css文件
這裏是我的組件
import React from 'react'
import { Link } from 'react-router'
import styles from './Header.css'
function Header() {
return (
<header className={styles.header}>
<h1>
Mi first react app
</h1>
<nav role="navigation">
<Link to="/">
Home
</Link>
<a
href="http://google.com"
target="_blank"
>
Google
</a>
</nav>
</header>
)
}
export default Header
我的WebPack配置:
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const path = require('path');
module.exports = {
entry: ['babel-polyfill', path.join(__dirname, '../src/client.js')],
output: {
filename: 'app.js',
path: path.join(__dirname, '../built/statics')
},
module: {
loaders: [
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /(node_modules)/,
query: {
presets: ['es2016', 'es2017', 'react'],
plugins: ['transform-es2015-modules-commonjs']
}
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader?modules' })
}
]
},
target: 'web',
plugins: [
new ExtractTextPlugin('../statics/styles.css')
],
watch: true
}
如果你需要,我的CSS是這樣的:
.header {
background: linear-gradient(90deg, #1c3643 0, #273b46 25%, #1e5372);
}
在前進,感謝任何人的幫助發現我缺少的東西