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

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

css-loader webpack-style-loader webpack reactjs

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 年前

Sean Larkin 8 年前

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

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

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

推荐文章

Guillaume Harari · 根据开发或产品环境加载css

7 年前

Max Silva · 无法使用vuejs2和webpack嵌入自定义字体

7 年前

Fered · Npm、Dev dependecy或dependecy,当使用webpack等将所有内容打包到一个脚本中时?

7 年前

Carlo · 如何使用Webpack 4仅在某些模块中导入jQuery?

7 年前

zh-mskl9 · Pug+Web包开发服务器

7 年前

Mizlul · 无法解析“css加载程序!”!自动刷新器加载程序'

7 年前

Aleksandr Gvozdev · 模拟'fs。readdirSync`节点。无递归的js

7 年前

jonnyg · 如何在docker文件中获取我可用的docker环境变量?(使用React/JS/webpack)

7 年前

Boris K · 将Extract Text Webpack插件与Vue CLI 3配合使用

7 年前

IsraGab · 使用webpack从angularjs模块加载特定指令

7 年前