使用Babel-Plugin-React-Css-Modules导入库样式表

Question

我正在尝试在我自己的应用程序中包含另一个库的css作为它们的组件。作为参考，我尝试使用这个数据表库：https://github.com/filipdanic/spicy-datatable。

在文档中，它声明了Out of the box, spicy-datatable is bare-bones. Include this CSS starter file in your project to get the look from the demo. Edit it to suit your needs.

我尝试导入我正在构建的组件顶部的样式表，如下所示:在我自己的组件文件中导入import * as spicy from 'spicy-datatable/src/sample-styles.css';。它没有设计好样式。我尝试将原始代码放入我的assets/styles文件夹中的index.scss文件中--不起作用。我试着把它放到我自己的样式文件./component.scss中--不起作用。

我目前的设置如下：

import * as styles from './component.scss';
import * as spicy from 'spicy-datatable/src/sample-styles.css';

我得到了一个错误：

Module parse failed: Unexpected token (4:0) You may need an appropriate loader to handle this file type.

webpack.config.js

const dirNode = 'node_modules';
const dirApp = path.join(__dirname, 'client');
const dirAssets = path.join(__dirname, 'assets');

/**
 * Webpack Configuration
 */
module.exports = {
  entry: {
    vendor: ['lodash'],
    bundle: path.join(dirApp, 'index')
  },
  resolve: {
    modules: [dirNode, dirApp, dirAssets]
  },
  plugins: [],
  module: {
    rules: [
      // BABEL
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /(node_modules)/,
        options: {
          compact: true
        }
      },
      // CSS / SASS
      {
        test: /\.(scss)$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: '[path]___[name]__[local]___[hash:base64:5]'
            }
          },
          'sass-loader'
        ]
      },

      // IMAGES
      {
        test: /\.(jpe?g|png|gif)$/,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]'
        }
      }
    ]
  }
};

.babelrc

"plugins": [
    [
      "react-css-modules",
      {
        "filetypes": {
          ".scss": {
            "syntax": "postcss-scss"
          }
        },
        "webpackHotModuleReloading": true
      }
    ]

我不确定我是否需要添加一些东西来专门处理.css文件，这是我第一次使用CSS模块。我认为react- CSS -modules做到了这一点，所以我不太确定为什么CSS文件不能正确加载。

编辑：

对我的webpack进行了编辑，包含了CSS：

  {
        test: /\.(css)$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[path]___[name]__[local]___[hash:base64:5]'
            }
          }
        ]
      },

错误消失了，但是样式仍然不会出现。

Answer 1

您是否可以尝试更改下面的内容：

import * as spicy from 'spicy-datatable/src/sample-styles.css';

至

import from 'spicy-datatable/src/sample-styles.css';

如果您使用的是CSS-Modules，请尝试下面的方法：

import spicy from 'spicy-datatable/src/sample-styles.css';

然后在JSX元素上使用样式，如下所示：

<h1 className={classes.<className in CSS here>}>

我使用spicy-datatable库设置了一个codesandbox，并导入了样式，看起来就像应用了这些样式一样。样式在"Hello.css“文件中，并在"index.js”中导入。

https://codesandbox.io/s/4j31xj3689

Answer 2

如果库不使用css -module(使用className属性而不是styleName)，我们需要对导入的css禁用模块，因此类名将保持不变。这可以通过两种方式完成：

1. 修改您的Webpack配置

module: {
    rules: [
        {
            test: /\.(css)$/,
            use: [
                'style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        modules: false
                    }
                }
            ]
        },
        ...
    ]
}

1. 将库css直接导入到您的scss样式表中(感谢this answer指出了如何执行正确的.css导入)。确保从导入行中排除.css文件扩展名。:global指令将阻止css-module修改此指令中所有样式的类名。

:global {
    @import "~library-module-name/.../CssFileWithoutExtension";
}