Importing styles from node_modules fails in scss files

[lcmen]

Describe the bug

When trying to import sass based library (i.e. bootstrap) in .scss file, Vite throws error.

Reproduction

1. npm install -D sass
2. npm install -S bootstrap
3. create styles.scss with: @import 'bootstrap/scss/bootstrap';
4. import styles.scss to main.js file: import './styles/index.scss'

System Info

• required vite version: 0.17.2
• required Operating System: MacOS 10.14.6
• required Node version: 13.11.0
• Optional:
  • npm/yarn version: npm 6.13.7
  • Installed vue version (from yarn.lock or package-lock.json): 3.0.0-beta.14
  • Installed @vue/compiler-sfc version: 3.0.0-beta.14

Logs (Optional if provided reproduction)

Error: Can't find stylesheet to import.
  ╷
1 │ @import 'bootstrap/scss/bootstrap';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/styles/index.scss 1:9  root stylesheet
    at Object._newRenderError (/Users/lucas/Code/personal/vuedito/node_modules/sass/sass.dart.js:13628:19)
    at Object._wrapException (/Users/lucas/Code/personal/vuedito/node_modules/sass/sass.dart.js:13474:16)
    at StaticClosure._renderSync (/Users/lucas/Code/personal/vuedito/node_modules/sass/sass.dart.js:13449:18)
    at Object.Primitives_applyFunction (/Users/lucas/Code/personal/vuedito/node_modules/sass/sass.dart.js:1064:30)
    at Object.Function_apply (/Users/lucas/Code/personal/vuedito/node_modules/sass/sass.dart.js:4895:16)
    at _callDartFunctionFast (/Users/lucas/Code/personal/vuedito/node_modules/sass/sass.dart.js:6577:16)
    at Object.renderSync (/Users/lucas/Code/personal/vuedito/node_modules/sass/sass.dart.js:6555:18)
    at Object.render (/Users/lucas/Code/personal/vuedito/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:772:37)
    at preprocess$1 (/Users/lucas/Code/personal/vuedito/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:936:25)
    at doCompileStyle (/Users/lucas/Code/personal/vuedito/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:861:48) {
  formatted: "Error: Can't find stylesheet to import.\n" +
    '  ╷\n' +
    "1 │ @import 'bootstrap/scss/bootstrap';\n" +
    '  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^\n' +
    '  ╵\n' +
    '  src/styles/index.scss 1:9  root stylesheet',
  line: 1,
  column: 9,
  file: '/Users/lucas/Code/personal/vuedito/src/styles/index.scss',
  status: 1
} 0 [
  Error: Can't find stylesheet to import.
    ╷
  1 │ @import 'bootstrap/scss/bootstrap';
    │         ^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    src/styles/index.scss 1:9  root stylesheet
      at Object._newRenderError (/Users/lucas/Code/personal/vuedito/node_modules/sass/sass.dart.js:13628:19)
      at Object._wrapException (/Users/lucas/Code/personal/vuedito/node_modules/sass/sass.dart.js:13474:16)
      at StaticClosure._renderSync (/Users/lucas/Code/personal/vuedito/node_modules/sass/sass.dart.js:13449:18)
      at Object.Primitives_applyFunction (/Users/lucas/Code/personal/vuedito/node_modules/sass/sass.dart.js:1064:30)
      at Object.Function_apply (/Users/lucas/Code/personal/vuedito/node_modules/sass/sass.dart.js:4895:16)
      at _callDartFunctionFast (/Users/lucas/Code/personal/vuedito/node_modules/sass/sass.dart.js:6577:16)
      at Object.renderSync (/Users/lucas/Code/personal/vuedito/node_modules/sass/sass.dart.js:6555:18)
      at Object.render (/Users/lucas/Code/personal/vuedito/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:772:37)
      at preprocess$1 (/Users/lucas/Code/personal/vuedito/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:936:25)
      at doCompileStyle (/Users/lucas/Code/personal/vuedito/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:861:48) {
    formatted: "Error: Can't find stylesheet to import.\n" +
      '  ╷\n' +
      "1 │ @import 'bootstrap/scss/bootstrap';\n" +
      '  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^\n' +
      '  ╵\n' +
      '  src/styles/index.scss 1:9  root stylesheet',
    line: 1,
    column: 9,
    file: '/Users/lucas/Code/personal/vuedito/src/styles/index.scss',
    status: 1
  }
]

[lcmen]

@daychongyang thanks for quick fix ❤️, I really appreciate that 🙇 .

PS. Is there a way for me to test it or do I need to wait for official release to NPM? I've tried to switch to master branch in my package.json by changing vite reference to github:vitejs/vite but it doesn't work since dist directory is not part of the repo.

[daychongyang]

@daychongyang thanks for quick fix ❤️, I really appreciate that 🙇 .

PS. Is there a way for me to test it or do I need to wait for official release to NPM? I've tried to switch to master branch in my package.json by changing vite reference to github:vitejs/vite but it doesn't work since dist directory is not part of the repo.

New version (v0.18.1) has been released.

[daychongyang]

@daychongyang thanks for quick fix ❤️, I really appreciate that 🙇 .

PS. Is there a way for me to test it or do I need to wait for official release to NPM? I've tried to switch to master branch in my package.json by changing vite reference to github:vitejs/vite but it doesn't work since dist directory is not part of the repo.

If you want to keep up with the upstream project at all times, you can clone the vite project from github to your local workspace and execute the following commands in sequence:

yarn

yarn dev

yarn link

Then go to your own project and execute yarn link vite, and finally restart the development service ( yarn dev).

[vincesp]

With this fix, I still need to know where the scss file is located within the node package, which isn't necessarily part of the package's public interface and hence might change without warning. In contrast, with vue cli I only need to provide the package name in the import statement. vue cli then will look into the package's package.json file and use the style entry to import to proper scss file. This is a more robust solution. Any thoughts if this could be implemented in Vite as well?

[snowdream]

@daychongyang
If i want to import styles from node_modules(bootstrap grid scss files) into my vite project(created by vite),Then what should i do?