在nextjs上使用scss设置样式不适用于.active

在Next.js上使用SCSS设置样式不适用于.active的问题可能是由于以下几个原因导致的：

1. 缺少正确的配置：在使用SCSS时，需要确保你的Next.js项目已经正确配置了SCSS的加载器。你可以通过在项目根目录下的next.config.js文件中添加以下配置来启用SCSS的支持：

const withSass = require('@zeit/next-sass');
module.exports = withSass();

这样配置后，Next.js会自动加载SCSS文件并将其转换为CSS。

1. 样式文件引入问题：在使用SCSS时，需要确保你正确地引入了样式文件。你可以在需要使用样式的组件文件中使用import语句引入SCSS文件，例如：

import styles from './styles.module.scss';

然后，你可以在组件中使用styles对象来访问样式类名。

1. 样式类名冲突：如果你的样式类名与其他样式类名冲突，可能会导致样式不生效。在使用SCSS时，建议使用模块化的方式来定义样式类名，以避免冲突。你可以在SCSS文件中使用模块化的方式定义样式类名，例如：

.myComponent {
  // 样式定义
}

然后，在组件中使用该样式类名：

import styles from './styles.module.scss';

const MyComponent = () => {
  return <div className={styles.myComponent}>Hello World</div>;
};

这样可以确保样式类名的唯一性，避免冲突。

1. 样式优先级问题：如果你的样式被其他样式覆盖，可能会导致样式不生效。在CSS中，样式的优先级是根据选择器的特殊性和位置来确定的。你可以通过提高选择器的特殊性或者调整样式的位置来解决这个问题。

如果以上方法都无法解决问题，可能需要进一步检查你的代码和项目配置，以确定是否有其他因素导致样式不生效。

关于Next.js和SCSS的更多信息，你可以参考腾讯云的产品介绍页面：Next.js和SCSS。这些产品提供了在云计算环境中使用Next.js和SCSS的详细说明和示例代码，可以帮助你更好地理解和应用它们。