Question

我正在创建reactjs web app，我正在尝试使用本地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类中心，但它不起作用。有人能告诉我哪里错了。

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文件中的样式

1 个答案: