Question

我有一个大的webpack / react / redux与Rails后端应用程序，我试图插入一些CSS。我做了一个简单的test.css就像这样

// test.css
* {
  color: tomato !important;
  font-size: 30px;
}

// app.js
import "./test.css";
<div className="hellworld">some text </div>

一切都变成番茄的颜色和大。

but once I change the `* { ... } ` to `.helloworld {}` it stops working.

这是一个简单的测试，用于了解css在我的应用中的行为方式，我的实际目标是使用react-toastify，它带有需要全局包含在页面中的css文件。

我正在通过修改css文件来测试我所知道的测试方法。有人会好好看看我的webpack配置，看看有什么不妥吗？

var webpack = require("webpack");
var path = require("path");
// var npmInstallWebpackPlugin = require('npm-install-webpack-plugin');
var WebpackNotifierPlugin = require("webpack-notifier");
var HappyPack = require("happypack");
// require('babel-polyfill')

// High CPU usage see here:
// https://github.com/webpack/watchpack/pull/23
// var WatchIgnorePlugin = require('watch-ignore-webpack-plugin')

var config = {
  entry: {
    admin_index: ["babel-polyfill", "./app/bundles/admin/index-entry.js"],
  },

  output: {
    path: path.resolve(__dirname, "../app/assets/javascripts/dist/"),
    filename: "[name]-bundle.js",
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        // use: ['babel-loader'],
        use: ["happypack/loader"],
        exclude: /node_modules|bower_modules/,
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: {
          loader: "url-loader",
          options: {
            limit: 204800,
          },
        },
        exclude: /node_modules|bower_modules/,
      },
      {
        test: /(\.scss|\.css)$/,
        use: [
          { loader: "style-loader" },
          {
            loader: "css-loader",
            options: {
              modules: true,
              sourceMap: true,
              // importLoaders: 1,
            },
          },
          // https://github.com/react-toolbox/react-toolbox-example/issues/32
          // "postcss-loader", // has separate config nearby
        ],
      },
    ],
  },

  resolve: {
    extensions: [".js", ".jsx", ".css"],
    modules: [
      "node_modules",
      path.join(__dirname, "app/bundles"),
      path.resolve("./app/bundles"),
    ],
  },

  // devtool: 'source-map',
  plugins: [
    new WebpackNotifierPlugin({
      title: "Webpack",
      contentImage: path.join(__dirname, "logo.png"),
    }),
    new webpack.DefinePlugin({
      __TEST__: process.env.NODE_ENV == "test",
      __DEV__: process.env.NODE_ENV == "dev",
    }),

    new webpack.DefinePlugin({
      "process.env.NODE_ENV": JSON.stringify("development"),
    }),
    new HappyPack({
      loaders: [
        "babel-loader?presets[]=es2015&presets[]=react&presets[]=stage-0",
      ],
      threads: 8,
    }),
    new webpack.NamedModulesPlugin(),
  ],

  watchOptions: {
    ignored: /node_modules/,
  },
};
module.exports = config;

样式加载器和css-loader样式未应用，但* {}有效。

0 个答案: