ВиТест | Невозможно импортировать файлы .css, скомпилированные из .scss

Я использую некоторые файлы .scss как часть повторно используемого модуля ES6 (ESM). В рамках процесса сборки я запускаю yarn sass -I node_modules src:dist, чтобы скомпилировать все эти файлы в .css, и они выводятся в каталог /dist.

Теперь, поскольку это модули ESM, мне нужно указать расширение файла при импорте файла, например import "my-styles.css". Как и в случае с другими моими импортами, я хочу указать расширение, с которым скомпилирован файл, а не то, которое используется в папке /src.

К сожалению, в отличие от других моих импортов, vitest подавляет импорт .css, говоря, что файл не существует. Есть ли способ заставить vitest либо разрешить импорт файла .css как .scss, если он не найден, либо иным образом издеваться над импортом .css?

🤔 А знаете ли вы, что...
С помощью CSS можно создавать эффекты тени, градиенты и прозрачность для элементов.


1
85
1

Ответ:

Решено

Нашел решение. В мою конфигурацию vitest добавлено следующее, чтобы вместо этого он разрешал импорт «.css» как файлы «.scss»:

resolve: {
    alias: [
      {
        find: /^(.*)\.css$/,
        replacement: "$1.scss"
      }
    ]
  }

Хотя это было бы проблематично, если бы в исходном каталоге у вас была комбинация файлов .css и .scss и/или .sass файлов. Поэтому вам нужно выбрать один и придерживаться его в проекте.