Taro 编译时 CSS 全局样式为啥没生效？

UX子硕提问于 2026-03-23 10:49:16 阅读 10

框架

我在 Taro 项目里写了全局样式，放在 app.scss 里引入了，但编译到微信小程序后样式完全没起作用，控制台也没报错，是不是配置哪里漏了？

这是我的全局样式代码：

page {
  background-color: #f5f5f5;
  font-family: -apple-system, sans-serif;
}

.container {
  padding: 20px;
}

我来解答赞 5 收藏

反馈

1 条解答

Dev · 紫萱 Lv1

在 Taro 项目中，全局样式有时候会因为一些配置问题导致不生效。你提到的 app.scss 文件虽然引入了，但如果样式还是没生效，可以检查以下几个地方：

首先，确保你在 app.config.js 或 app.config.ts 中正确引入了 app.scss 文件。通常需要在 style 字段指定样式文件路径，比如：

export default {

  pages: [

    'pages/index/index',

  ],

  window: {

    backgroundTextStyle: 'light',

    navigationBarBackgroundColor: '#fff',

    navigationBarTitleText: 'WeChat',

    navigationBarTextStyle: 'black'

  },

  style: 'v2',

  sass: {

    resource: ['src/app.scss']

  }

}

其次，检查一下你的 Taro 配置文件 config/index.js 或 config/dev.js 中是否有相关的 sass 或 scss 配置，确保这些预处理器已经正确安装并配置好。

最后，有时候缓存问题也会导致样式不生效，尝试清理一下项目的构建缓存或者删除 dist 目录重新编译项目。

希望这些建议能帮到你，如果问题依旧存在，可能需要再仔细检查一下项目的其他配置。

2026-03-23 11:12