从节点模块直接导入的 CSS 文件奇怪地丢失了

Posted 2023-03-13

【中文标题】从节点模块直接导入的 CSS 文件奇怪地丢失了

【英文标题】：Directly imported CSS file from node modules oddly go missing

【发布时间】：2021-08-11 09:04:36

【问题描述】：

我在尝试从节点模块导入 CSS 文件时遇到了一个非常特殊的问题。

在我的App.tsx 文件中，我有

import './App.css';                       // works
import '@foo/my-dependency/dist/foo.css'; // doesn't work

虽然导入本地 CSS 文件效果很好，但从节点模块导入 foo.css 根本不起作用，但没有观察到编译错误。

如果我将该行更改为require 语法，它可以正常工作。

require('@foo/my-dependency/dist/foo.css'); // works

如果我将其更改为 CSS 模块之类的语法，它也可以正常工作。

import style from '@foo/my-dependency/dist/foo.css'; // works
console.log(style);     // to ensure the imported stuff is used at least once

为了支持上面的注释，我需要添加 CSS 模块类型声明，如 here 所述。

我不确定它到底哪里出错了。我在模块规则上的 Webpack 配置如下所示。我使用 webpack 开发服务器进行测试。 Webpack 版本为 5.23.0。

  module: 
    rules: [
      
        test: /\.(jsx?|tsx?)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      ,
      
        test: /\.s?css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      
    ],
  ,

【参考方案1】：

有时我真的很惊讶自己在绊倒自己方面做得多么出色。这是由我放入依赖包的package.json 文件中的sideEffects: false 设置引起的，以支持Webpack 摇树。 doc 中特别提到 css/scss 文件需要标记为副作用，以防它们被修剪为不需要的结果。更改为sideEffects: ["*.css"] 后一切正常。

我上面列出的其他两个可行的解决方案也是有效的也就不足为奇了，因为当 Webpack 进行树摇动时，它会从入口文件开始遍历 import 语句。如果不是import 声明或者是专门使用了导入的东西，肯定tree shaking 不会生效。