无法使用本地 css 文件中的样式

Question

我正在创建 reactjs 网络应用程序，我正在尝试使用本地 css 文件中的样式。给出源码供参考

/src/css/aboutcompany.css

.center {
    text-align: center;
    color: red;
}

/src/AboutCompany.js

import React,{Component} from 'react';
import style from './css/aboutcompany.css';

class AboutCompany extends Component{
  render(){
    return(
      <div>
        <p className="style.center"> Company</p>
        <hr/>
        Technologies  is leading  Company  providing end to end software solutions to customers globally. We are specialized in every vertical of industries and deliver quality solutions using latest technologies.
      </div>
    )
  }
}

export default AboutCompany;

webpack.config.js

var config = {
   entry: './src/index.js',
   output: {
      path:'/build/',
      filename: 'index.js',
   },
   devServer: {
      inline: true,
      port: 8081,
      historyApiFallback: true
   },
   module: {
      rules: [
        {
      test: /\.(jpg|png|svg)$/,
      use: 'url-loader'
    },
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            use: 'babel-loader'

         },
         {
          test: /\.css$/,
          use: 'css-loader'
        }
      ]
   }
}
module.exports = config;

正如您在 AboutCompany.js 此处 <p className="style.center"> Company</p> 中看到的，我们正在尝试使用 css class 中心，但它不起作用。谁能告诉我哪里错了。

Answer 1

要在开发中使用 css 模块 首先需要安装 style-loader:

$ npm install style-loader --save-dev

然后在您的配置中将 modules=true 作为选项传递给 css-loader

{
  test: /\.css$/,
  use: ['style-loader', 'css-loader?modules=true']
}

最后，在您的 jsx 代码中，您可以这样调用类：

<p className={styles.center}/>

大功告成。

无法使用本地 css 文件中的样式

unable to use styles from local css file

reactjs

css-loader