简体   繁体   English

CSS模块不适用于第三方软件包react-spinkit

[英]CSS Modules not working with 3rd party package react-spinkit

I am trying to utilize the react-spinkit package for my React.js web application. 我正在尝试将React-spinkit包用于我的React.js Web应用程序。 Within this application I have opted to use CSS modules. 在此应用程序中,我选择使用CSS模块。 When I made the switch to CSS modules, I noticed that the spinner component that I created was not rendering. 当我切换到CSS模块时,我注意到我创建的微调器组件未呈现。 I am sure this has to do with the fact that I am now using CSS modules. 我确信这与我现在正在使用CSS模块有关。 Currently my webpack.config.js file looks something like this: 目前,我的webpack.config.js文件看起来像这样:

module.exports = {
   //other configurations...
   module: {
       rules: [
           {
               test: /\.(js|jsx)$/,
               exclude: /node_modules/,
               use: 'babel-loader'
           },
           {
               test: /\.css$/,
               loader: 'style-loader!css-loader? modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
           }
       ]
   }
}

I believe that I need to set a rule for regular css to be compiled by the css-loader. 我相信我需要为由css-loader编译的常规css设置规则。 However, I am not aware of how to combine a rule so that the css-loader can use both css modules and regular css. 但是,我不知道如何组合规则,以便css-loader可以同时使用css模块和常规css。 Any help would be appreciated. 任何帮助,将不胜感激。

try having your config look like this in that section: 尝试在该部分中使您的配置如下所示:

rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM