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

问题描述

我在尝试从节点模块导入 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',],}
    ],

解决方法

有时我真的很惊讶我能把自己绊倒。这是由于我在依赖包的 sideEffects: false 文件中添加了 package.json 设置以支持 Webpack 树摇动。 doc 中特别提到 css/scss 文件需要标记为副作用，以防它们被修剪为不需要的结果。更改为 sideEffects: ["*.css"] 后一切正常。

我上面列出的另外两个工作解决方案是有效的，这并不奇怪，因为当 Webpack 进行摇树时，它会从入口文件开始遍历 import 语句。如果不是 import 语句或者是专门使用了导入的东西，肯定不会使 treeShaking 生效。