代码之家  ›  专栏  ›  技术社区  ›  Gopinath Shiva

css加载器未导入.css文件并返回空对象

  •  20
  • Gopinath Shiva  · 技术社区  · 8 年前

    从css文件导入样式。返回空对象。css加载程序似乎工作不正常。有人能帮我吗。请在下面找到参考文件

    index.js

    import React from 'react'   
    import style from './header.css'
    
    console.log(style) // Returning empty object
    
    export default class Header extends React.PureComponent {
      render() {
        return(
          <header className = {style.header}>
            This is header component
          </header>
        )
      }
    }
    

    /header.css

    .header {
      background: #007DC6;
    }
    

    /webpack.config.js

    {
      test: /\.css$/,
      exclude: /node_modules/,
      loaders: ['style-loader', 'css-loader'],
    }, {
      test: /\.css$/,
      include: /node_modules/,
      loaders: ['style-loader', 'css-loader'],
    }
    
    2 回复  |  直到 8 年前
        1
  •  16
  •   Sean Larkin    8 年前

    我想知道这是否是您没有使用的 css-modules 您正在展示的示例是实现加载程序的css模块功能的示例。

    也许可以尝试添加 ?modules 询问 css-loader 释义

        2
  •  7
  •   Mohammad Rajabloo    4 年前

    您可以通过三种方式解决问题:

    #1: 代替 'css-loader' 具有 'css-loader?modules=true&camelCase=true'

    #2: 老派是这样的吗

    ##index.js

    import React from 'react'   
    import './header.css'
    
    export default class Header extends React.PureComponent {
      render() {
        return(
          <header className="header">
            This is header component
          </header>
        )
      }
    }
    

    #3: 使用 babel-plugin-react-css-modules React CSS Modules