Uniapp 中 Sass/SCSS 子级样式生效攻略

2023-10-18 17:10:30

子级样式不生效的原因

在 Uniapp 中引入 Sass/SCSS 文件时，如果子级样式不生效，通常是由于以下原因造成的：

Webpack 配置不当 ：Uniapp 使用 Webpack 进行构建，需要在 webpack.config.js 文件中正确配置 Sass/SCSS 加载器。
NPM 包依赖错误 ：Uniapp 中的 Sass/SCSS 功能依赖于 NPM 包，需要确保已正确安装并引用了这些包。
Sass/SCSS 语法错误 ：Sass/SCSS 文件中存在语法错误也会导致子级样式不生效。

解决办法

要解决子级样式不生效的问题，请按照以下步骤操作：

检查 Webpack 配置 ：确保 webpack.config.js 文件中包含以下配置：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('scss')
      .test(/\.scss$/)
      .use('sass-loader')
      .loader('sass-loader')
      .end();
  }
};

安装 NPM 包 ：安装必要的 NPM 包，包括 sass-loader 和 node-sass：

npm install sass-loader node-sass --save-dev

检查 Sass/SCSS 语法 ：仔细检查 Sass/SCSS 文件，确保没有语法错误。常见的错误包括分号缺失、嵌套错误和拼写错误。

嵌套样式问题

在 Uniapp 中使用 Sass/SCSS 时，还可能遇到嵌套样式不生效的问题。这是因为 Uniapp 默认情况下不会将嵌套样式编译为 CSS。要解决此问题，可以在 webpack.config.js 文件中添加以下配置：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('scss')
      .test(/\.scss$/)
      .use('sass-loader')
      .loader('sass-loader')
      .options({
        sassOptions: {
          includePaths: [], // 指定 Sass 导入路径
          indentedSyntax: true // 启用缩进语法
        }
      })
      .end();
  }
};