从“node_modules"导入 CSS在 Webpack 中 [英] Import CSS from "node_modules" in Webpack

问题描述

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

Some third-party modules I'm using have their own CSS files. I'd like to include them in my app's one, single CSS file, which is processed by Webpack. How can CSS files under "node_modules" be imported into my CSS file?

例如，我正在使用第三方 react-select 模块，但我无法从 node_modules 导入其 CSS 文件:

For example, I'm using the third-party react-select module, but I can't import its CSS file from node_modules:

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

webpack.config.js 中的相关加载器:

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

推荐答案

您可以通过添加波浪号前缀 来导入相对于项目根目录的文件(从根文件夹解析 node_modules/)~:

You can import files relative to your project's root (resolving node_modules/ from the root folder) by prefixing with a tilde ~:

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

这是一个文档不足的 Webpack(冗余短语)约定，请参阅 https://github.com/webpack-contrib/css-loader/issues/12#issuecomment-41940311 和 CSS `url()` 中的 `~` 波浪号有什么作用?

This is a poorly documented Webpack (a redundant phrase) convention, see https://github.com/webpack-contrib/css-loader/issues/12#issuecomment-41940311 and What does a `~` tilde in a CSS `url()` do?

这篇关于从“node_modules"导入 CSS在 Webpack 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！