Question

我正在使用Facebook对Webpack进行反应，并将节点模块CSS导入我的组件中。它不起作用。

webpack.config.js

const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve("dist"),
    filename: "index_bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: "babel-loader",
        exclude: /node_modules/,
        query: {
          presets: ["react", "es2015", "stage-0"],
          plugins: ["transform-class-properties"]
        }
      },
      {
        test: /\.css?$/,
        loaders: ExtractTextPlugin.extract(
          "style-loader!css-loader?modules=true&localIdentName=[name]_[local]_[hash:base64:5]"
        )
      }
    ]
  },
  plugins: [new ExtractTextPlugin("./public/styles.css")]
};

反应组件文件

我导入react-times CSS文件

import React from "react";
import TimePicker from "react-times"; 
import "react-times/css/material/default.css";    

export default class Book extends React.Component {

  render() {

    return (
        <TimePicker />
    );
  }
}

Answer 1

您可以尝试

// module
{
    test : /\.css$/,
    loader: ExtractTextPlugin.extract({
    fallback: "style-loader",
    use: ['css-loader']
    })
}
// plugins
new ExtractTextPlugin("styles.css")

webpack 3.8.1 Facebook的反应进口节点模块的CSS不工作

1 个答案: