Vue 3中引入SCSS和LESS依赖的教程指南

// Vue 3中引入SCSS依赖的配置示例
// 在Vue 3项目中，你可以使用以下配置来处理SCSS文件
 
// 安装依赖
// npm install --save-dev sass-loader sass
 
// vue.config.js 配置
module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";` // 引入全局SCSS变量文件
      }
    }
  }
};
 
// 在组件中使用SCSS
// <style lang="scss">
// 使用SCSS编写样式
// </style>

// Vue 3中引入LESS依赖的配置示例
// 在Vue 3项目中，你可以使用以下配置来处理LESS文件
 
// 安装依赖
// npm install --save-dev less-loader less
 
// vue.config.js 配置
module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          globalVars: {
            primary_color: '#f00' // 定义全局LESS变量
          }
        }
      }
    }
  }
};
 
// 在组件中使用LESS
// <style lang="less">
// 使用LESS编写样式
// </style>

以上代码展示了如何在Vue 3项目中配置SCSS和LESS的loader，并在组件中使用它们。通过vue.config.js文件中的css.loaderOptions选项，你可以设置额外的loader配置，包括全局样式变量。这样可以提高样式开发的效率和一致性。