uniapp中使用全局样式文件引入的三种方式

如果你想在 uni-app 中全局引入 SCSS 文件（例如 global.scss），可以通过以下步骤进行配置：

方法一：在 main.js 中引入

1. 在 main.js 中引入全局样式：

   你可以在 src/main.js 文件中直接引入 SCSS 文件，这样可以确保在整个应用中都可以使用这些样式。

   // src/main.js
   import Vue from 'vue';
   import App from './App.vue';
   import './styles/global.scss'; // 全局引入 SCSS 文件
   
   Vue.config.productionTip = false;
   
   new Vue({
     render: h => h(App),
   }).$mount('#app');

   方法二：在 App.vue 中引入

2. 在 App.vue 中引入：

   你也可以在 App.vue 组件的 <style> 标签中引入全局样式：

   <template>
     <view>
       <router-view></router-view>
     </view>
   </template>
   
   <script>
   export default {
     // 你的 JavaScript 代码
   }
   </script>
   
   <style lang="scss">
   @import './styles/global.scss'; // 全局引入 SCSS 文件
   </style>

   方法三：通过 vue.config.js 配置

3. 通过 vue.config.js 配置 （如果你使用的是 vue-cli）：

   如果你的项目是通过 vue-cli 创建的，还可以在 vue.config.js 中配置全局样式。你可以在 vue.config.js 中添加如下配置：

   // vue.config.js
   const path = require('path');
   
   module.exports = {
     css: {
       loaderOptions: {
         sass: {
           additionalData: `@import "@/styles/global.scss";`, // 全局引入
         },
       },
     },
   };

   注意事项

确保 global.scss 文件的路径是正确的。

• 使用全局样式时，请注意可能会导致样式冲突，确保样式的选择器足够具体，以避免影响到其他组件的样式。
• 如果你使用的是 uni-app 的 HBuilderX 开发工具，确保在项目设置中启用了 SCSS 支持。

如果你使用的是 uni-app 的 HBuilderX 开发工具，确保在项目设置中启用了 SCSS 支持。