cssPreprocessors.js 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. module.exports = cli => {
  2. cli.injectFeature({
  3. name: 'CSS Pre-processors',
  4. value: 'css-preprocessor',
  5. description: 'Add support for CSS pre-processors like Sass, Less or Stylus',
  6. link: 'https://cli.vuejs.org/guide/css.html'
  7. })
  8. const notice = 'PostCSS, Autoprefixer and CSS Modules are supported by default'
  9. cli.injectPrompt({
  10. name: 'cssPreprocessor',
  11. when: answers => answers.features.includes('css-preprocessor'),
  12. type: 'list',
  13. message: `Pick a CSS pre-processor${process.env.VUE_CLI_API_MODE ? '' : ` (${notice})`}:`,
  14. description: `${notice}.`,
  15. choices: [
  16. // In Vue CLI <= 3.3, the value of Sass option in 'sass' an means 'node-sass'.
  17. // Considering the 'sass' package on NPM is actually for Dart Sass, we renamed it to 'node-sass'.
  18. // In @vue/cli-service there're still codes that accepts 'sass' as an option value, for compatibility reasons,
  19. // and they're meant to be removed in v4.
  20. {
  21. name: 'Sass/SCSS (with dart-sass)',
  22. value: 'dart-sass'
  23. },
  24. {
  25. name: 'Sass/SCSS (with node-sass)',
  26. value: 'node-sass'
  27. },
  28. {
  29. name: 'Less',
  30. value: 'less'
  31. },
  32. {
  33. name: 'Stylus',
  34. value: 'stylus'
  35. }
  36. ]
  37. })
  38. cli.onPromptComplete((answers, options) => {
  39. if (answers.cssPreprocessor) {
  40. options.cssPreprocessor = answers.cssPreprocessor
  41. }
  42. })
  43. }