首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >css-loader不导入返回空对象的.css文件

css-loader不导入返回空对象的.css文件
EN

Stack Overflow用户
提问于 2016-12-23 15:06:06
回答 2查看 14.1K关注 0票数 20

从css文件导入样式。返回空对象。似乎css-loader不能正常工作。有人能帮我这个忙吗。请在下面找到参考文件

index.js

代码语言:javascript
复制
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

代码语言:javascript
复制
.header {
  background: #007DC6;
}

./webpack.config.js

代码语言:javascript
复制
{
  test: /\.css$/,
  exclude: /node_modules/,
  loaders: ['style-loader', 'css-loader'],
}, {
  test: /\.css$/,
  include: /node_modules/,
  loaders: ['style-loader', 'css-loader'],
}
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-12-23 15:45:09

我想知道这是不是因为您没有使用css-modules。您正在展示的示例是一个实现加载器的css-modules特性的示例。

也许可以尝试将?modules查询添加到css-loader定义中。

票数 15
EN

Stack Overflow用户

发布于 2018-07-10 04:19:24

你可以用三种方法解决你的问题:

#1:用'css-loader?modules=true&camelCase=true'替换'css-loader'

#2:像这样做老派:

##index.js

代码语言:javascript
复制
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-modulesReact CSS Modules

票数 6
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/41296757

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档