Question

我遇到了webpack和我的反应应用程序的问题。我正在开发我的应用程序，但是当我运行我的bundle脚本来运行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);
}

事先，感谢任何帮助，以发现我缺少的东西

Answer 1

您可以尝试进行如下所述的更改吗？

什么是“Header.css”？

此代码的用途是什么？

import styles from './Header.css'

文件名为 styles.css ，如 ExtractTextPlugin 中所述。

您应该在HTML中直接添加“statics / styles.css”文件。

此外，这里

function Header() {
  return (
    <header className="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>
  )
}

ExtractTextplugin的目标是生成一个单独的CSS文件，可以像一般情况一样单独使用。

我的webpack不会生成我的css文件

1 个答案: