从 Webpack 中的“node_modules”导入 CSS答案

【问题标题】：Import CSS from "node_modules" in Webpack从 Webpack 中的“node_modules”导入 CSS
【发布时间】：2018-09-06 04:20:21
【问题描述】：

我使用的一些第三方模块有自己的 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
          }
        }
      ]
    })
  }

【问题讨论】：

试试@import '~react-select/dist/react-datetime.css';，波浪号是项目根目录的别名
解决了这个问题。谢谢！如果您想添加答案，我会接受...
2 个月后的惊喜！我喜欢假网点

标签： webpack webpack-style-loader css-loader

【解决方案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 `~` tilde in a CSS `url()` do?

【讨论】：

请注意，它现在已记录在案：webpack.js.org/loaders/css-loader/#url webpack.js.org/loaders/css-loader/#import“要从 node_modules 路径（包括 resolve.modules）导入资产并为别名，在其前面加上 ~”另外，请注意它不是 webpack 的核心特性，而是 css-loader 的特性。
出于某种原因，我必须删除 .css 扩展名才能正常工作

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

我今天遇到了类似的问题。毕竟，我所要做的就是在我的 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';

【讨论】：