面试题：Next.js中如何配置Sass以构建动态样式

配置Sass步骤

安装依赖：在项目根目录下，通过npm或yarn安装node-sass和sass-loader。

npm install node-sass sass-loader --save-dev
# 或
yarn add node-sass sass-loader --dev

配置Webpack：在Next.js项目中，创建或编辑next.config.js文件，添加以下配置：

const path = require('path');

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
    // 你可以根据实际情况调整includePaths路径
  },
};

创建Sass文件：在项目合适位置创建.scss文件，比如在styles目录下创建styles.scss，就可以开始编写Sass代码。

引入Sass文件：在页面组件或应用全局组件（如_app.js）中引入.scss文件，例如在_app.js中：

import '../styles/styles.scss';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

通过Sass变量实现动态样式切换

定义Sass变量：在styles.scss或其他Sass文件中定义主题颜色变量，例如：

// 定义默认主题颜色
$primary-color: #1a73e8;

body {
  background-color: $primary-color;
}

创建主题切换逻辑：在JavaScript代码中，通过修改Sass变量的值来切换主题。一种方法是利用CSS自定义属性（CSS Variables）结合Sass。首先在Sass中定义一个映射变量：
```
$themes: (
  light: (
    primary-color: #1a73e8,
    background-color: #fff
  ),
  dark: (
    primary-color: #333,
    background-color: #111
  )
);
```

生成CSS自定义属性：通过Sass循环为每个主题生成对应的CSS自定义属性：

@each $theme-name, $theme in $themes {
.theme-#{$theme-name} {
    --primary-color: map-get($theme, primary-color);
    --background-color: map-get($theme, background-color);
  }
}

在组件中切换主题：在React组件中，通过修改类名来切换主题。例如，在一个按钮点击事件中切换主题：

import React, { useState } from'react';

const ThemeSwitcher = () => {
  const [theme, setTheme] = useState('light');

  const handleThemeSwitch = () => {
    setTheme(theme === 'light'? 'dark' : 'light');
  };

  return (
    <div className={`theme-${theme}`}>
      <button onClick={handleThemeSwitch}>
        {theme === 'light'? '切换到深色主题' : '切换到浅色主题'}
      </button>
    </div>
  );
};

export default ThemeSwitcher;

在Sass中使用CSS自定义属性：修改原Sass样式，使用CSS自定义属性：
```
body {
  background-color: var(--background-color);
  color: var(--text-color);
}
```

这样就可以通过切换类名，实现主题颜色的动态切换。

星途面试题库

面试题：Next.js中如何配置Sass以构建动态样式

知识考点

面试题答案

配置Sass步骤

通过Sass变量实现动态样式切换