如何在Vue项目中为所有组件设置默认的lang="stylus"？

Great question! Having to type lang="stylus" in every single component's <style> block is such a tedious chore—let's fix that once and for all. The approach depends on whether you're using Vue CLI or Vite (the two most common Vue project setups), so I'll cover both:

For Vue CLI Projects #

1. First, make sure you have stylus and stylus-loader installed (if you haven't already):

   npm install stylus stylus-loader --save-dev
   # or
   yarn add stylus stylus-loader --dev
   

2. Locate or create a vue.config.js file in your project root (this is where we'll tweak the Vue loader settings).
3. Add the following configuration to override the default style language:

   module.exports = {
     chainWebpack: config => {
       config.module
         .rule('vue')
         .use('vue-loader')
         .tap(options => {
           // Update the compiler options to set stylus as the default style lang
           options.compilerOptions = {
             ...options.compilerOptions,
             style: {
               lang: 'stylus'
             }
           }
           return options
         })
     }
   }
   

4. Restart your dev server, and now every <style> block in your components will default to Stylus—no need to add lang="stylus" anymore! If you ever need to use a different preprocessor for a specific component, just manually add the lang attribute (like lang="scss") to override the default.

For Vite Projects #

1. First, install stylus (Vite handles the loader internally, so no need for a separate loader package):

   npm install stylus --save-dev
   # or
   yarn add stylus --dev
   

2. Open your vite.config.js file in the project root.
3. Modify the Vue plugin configuration to set Stylus as the default style language:

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   
   export default defineConfig({
     plugins: [
       vue({
         template: {
           compilerOptions: {
             style: {
               lang: 'stylus'
             }
           }
         }
       })
     ]
   })
   

4. Restart your Vite dev server, and you're good to go! Just like with Vue CLI, you can still override the default for individual components by specifying a different lang attribute.

内容的提问来源于stack exchange，提问作者trusktr