从Webpack中的“node_modules”导入CSS

Question

我使用的一些第三方模块有自己的 CSS 文件。我想将它们包含在我的应用程序的一个 CSS 文件中，该文件由 Webpack 处理。如何将“node_modules”下的CSS文件导入到我的CSS文件中？

例如，我使用第三方

react-select

模块，但无法从

node_modules

导入其CSS文件:

@import 'react-select/dist/react-datetime.css';

webpack.config.js

中的相关加载器：

  {
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
      use: [
        {
          loader: 'css-loader',
          options: {
            url: false
          }
        }
      ]
    })
  }

Answer 1

您可以通过添加波形符前缀

node_modules/

来导入相对于项目根目录的文件（从根文件夹解析

~

）：

@import '~react-select/dist/react-datetime.css';

这是一个记录不足的 Webpack（冗余短语）约定，请参阅 https://github.com/webpack-contrib/css-loader/issues/12#issuecomment-41940311 和 What does a `~` 波浪号CSS `url()` 做什么？

Answer 2

我今天也遇到了类似的问题。毕竟，我所要做的就是在我的 webpack 配置文件中 configure

resolve

。我希望这会对某人有所帮助。

我使用的Webpack版本：

"webpack": "^4.37.0",

在 webpack 配置文件中，应配置以下内容：

module.exports = {
  resolve: {
    extensions: ['.json', '.js', '.jsx'],
    modules: ['node_modules'],
  },

或

module.exports = {
  resolve: {
    alias: {
      'some-library': path.resolve(__dirname, './node_modules/some-library'),
    }
  },

在css文件中，我们可以通过相对路径访问库：

node_modules

:

@import '~some-library/src/some-css-file';

Answer 3

如果您使用一个 node_modules 文件夹中的太多内容，您还可以通过传递以下选项来创建别名

options: {
    url: false,
    includePaths: [
        // this one for using node_modules as a base folder
        path.resolve('node_modules'),
        // this one for using sass as the base folder
        path.resolve('node_modules/flag-icon-css/sass')
    ]
}

配置完成后，您可以按照您在问题中尝试的方式导入。

Answer 4

我使用 Webpack 5。我也遇到了无法从外部库导入外部 .css 文件的问题。我尝试将

resolve:[...]

属性添加到我的

webpack.config.js

文件中，但所有这些都无济于事：webpack 没有注入样式。然后我发现了以下黑客：我没有以通常的

import "external-lib/style.css"

方式导入.css（这对我的情况没有帮助），而是进行了命名导入，如下所示：

import necessaryStyle from "external-lib/style.css";
const ReactComponent = () => {
    console.log("necessity logging: ", necessaryStyle);
...}

console.log 语句将打印

undefined

但这个技巧在我的例子中有效。外部样式被注入到我的 .html 文档的

<style><style/>

标签中。