Skip to content

CSS import in sass

Describe the bug

When trying to use css imports in scss, Vite css throws and error because of the scss comments. I would expect vite to use the sass installation to transform the scss files before using the internal parser but instead it uses it's internal postcss. Also the repo: https://github.com/abdo643-HULK/Resume

Reproduction

index.scss @import url("./shared.scss");

shared.scss

:root {
  // Fonts
  --font-fira-code: "Fira Code";
}

System Info

System:
    OS: macOS 11.6.2
    CPU: (8) x64 Intel(R) Core(TM) i7-4750HQ CPU @ 2.00GHz
    Memory: 13.89 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.10.0 - ~/.nvm/versions/node/v16.10.0/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.10.0/bin/yarn
    npm: 7.24.0 - ~/.nvm/versions/node/v16.10.0/bin/npm
    Watchman: 2021.11.08.00 - /usr/local/bin/watchman
  Browsers:
    Chrome: 96.0.4664.93
    Safari: 15.1
    Safari Technology Preview: 15.4
  npmPackages:
    vite: ^2.7.1 => 2.7.1

Used Package Manager

pnpm

Logs

[vite:css] postcss-import: /Users/abdo/projects/Resume/src/web/scss/shared.scss:160:37: Unknown word
file: /Users/abdo/projects/Resume/src/web/scss/index.scss
error during build:
CssSyntaxError: postcss-import: /Users/abdo/projects/Resume/src/web/scss/shared.scss:160:37: Unknown word
    at Input.error (/Users/abdo/projects/Resume/node_modules/.pnpm/postcss@8.4.4/node_modules/postcss/lib/input.js:148:16)
    at Parser.unknownWord (/Users/abdo/projects/Resume/node_modules/.pnpm/postcss@8.4.4/node_modules/postcss/lib/parser.js:522:22)
    at Parser.other (/Users/abdo/projects/Resume/node_modules/.pnpm/postcss@8.4.4/node_modules/postcss/lib/parser.js:149:12)
    at Parser.parse (/Users/abdo/projects/Resume/node_modules/.pnpm/postcss@8.4.4/node_modules/postcss/lib/parser.js:59:16)
    at parse (/Users/abdo/projects/Resume/node_modules/.pnpm/postcss@8.4.4/node_modules/postcss/lib/parse.js:11:12)
    at new LazyResult (/Users/abdo/projects/Resume/node_modules/.pnpm/postcss@8.4.4/node_modules/postcss/lib/lazy-result.js:133:16)
    at Processor.process (/Users/abdo/projects/Resume/node_modules/.pnpm/postcss@8.4.4/node_modules/postcss/lib/processor.js:28:14)
    at runPostcss (/Users/abdo/projects/Resume/node_modules/.pnpm/vite@2.7.1_sass@1.44.0/node_modules/vite/dist/node/chunks/dep-58399509.js:282:6)
    at processContent (/Users/abdo/projects/Resume/node_modules/.pnpm/vite@2.7.1_sass@1.44.0/node_modules/vite/dist/node/chunks/dep-58399509.js:276:10)
    at /Users/abdo/projects/Resume/node_modules/.pnpm/vite@2.7.1_sass@1.44.0/node_modules/vite/dist/node/chunks/dep-58399509.js:705:20
 ELIFECYCLE  Command failed with exit code 1.

Validations