Question

React未加载任何全局CSS。所有本地组件都可以获取其本地样式组件。但是，全局css无法生成所有组件。我尝试了不同的导入路径，并尝试了不同的文件，也require(path)。什么都没得到。

src
--modules
----component1
----component2
----asset
---------global.css
--index.js

global.css

.test-class{
    font-size: 100px;
    color:red;
}

在index.js

import './modules/assets/global.css'
render() {
return (<div className="test-class">Hello World</div>)}

但是，如果我使用样式化的组件，它将起作用。

这是我的webpack

module.exports = {
entry: ['babel-polyfill', './src/vendor.js', './src/index.js'],
  plugins: [
    new HTMLWebpackPlugin({
      template: 'src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: isDev ? '[name].css' : '[name].[hash].css',
      chunkFilename: isDev ? '[id].css' : '[id].[hash].css'
    })
  ],
module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader', 'eslint-loader']
      },
      {
        test: /\.ts[x]?$/,
        exclude: /node_modules/,
        use: ['babel-loader', 'awesome-typescript-loader']
      },
      {
        test: /\.s?[ac]ss$/,
        use: [
          'style-loader', // : MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: false
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              path: '/postcss.config.js',
              sourceMap: true
            }
          }
        ]
      }
    ]
  },
}

Answer 1

您正试图从global.css获取类，但是您正在app.css文件中导入index.js。导入正确的文件即可设置好。

您正在正确导入它：

import './modules/assets/global.css';

Webpack看起来也不错，但是如果您想确保只为CSS创建规则，因为您似乎并没有使用任何CSS或类似的东西：

{test: /\.css$/, loader: 'style-loader'},
    {
        test: /\.css$/,
        loader: 'css-loader',
        options: {
          importLoaders: 1,
          modules: false
        }
    },

反应不导入全局css；本地电脑还可以

1 个答案: