在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
          }
        }
      ]
    })
  }

- Donald T

---

我对使用@import方式很感兴趣，但是想用Vite（而不是webpack） - undefined

Answer 1

通过在路径前面加上波浪号 ~，您可以相对于项目的根目录导入文件（从根文件夹解析 node_modules/）:

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

这是一个文档不完善的Webpack（一个多余的短语）约定，请参见https://github.com/webpack-contrib/css-loader/issues/12#issuecomment-41940311和CSS `url()`中的`~`波浪号是什么意思？

- Andy Ray

---

请注意，现在已经有文档记录： https://webpack.js.org/loaders/css-loader/#url https://webpack.js.org/loaders/css-loader/#import“要从node_modules路径（包括resolve.modules）导入资源，并对别名使用前缀~”还要注意，这不是核心Webpack功能，而是css-loader的一个功能。 - dosentmatter

我不知道为什么，但我必须删除.css扩展名才能使其正常工作。 - vidstige

Answer 2

今天我遇到了类似的问题，但是解决方法很简单，只需要在我的webpack配置文件中配置 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';

- mnishiguchi

---

这对我有用，但是@import语句需要写成@import 'node_modules/lib-name/file-name';。 - undefined

Answer 3

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

翻译后的内容：

如果您从一个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')
    ]
}

配置完成后，您可以像在问题中尝试的那样进行导入。

注：Original Answer翻译成"最初的回答"

- viral

Answer 4

我使用Webpack 5。我还遇到一个问题，就是无法从外部库中导入外部的.css文件。我尝试在我的webpack.config.js文件中添加resolve:[...]属性，以及其他尝试，但都无济于事：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文档的标签中。

- user36339