[Feature Request] CSS 样式的条件编译 在使用预编译(比如SCSS)的时候不支持

[sunrisejack]

关于CSS样式的条件编译，如果不使用预编译的时候，可以编译成功，但使用SCSS的时候则编译不成功。

<!-- 这样写不支持条件编译 -->
<style lang="scss" scoped>
.title {
  /* @mpx-if (__mpx_mode__ === 'wx') */
  color: blue;
  /* @mpx-else */
  color: red;
  /* @mpx-endif */
  font-size: 18px;
}
</style>

<!-- 这样写支持-->
<style scoped>
.title {
  /* @mpx-if (__mpx_mode__ === 'wx') */
  color: blue;
  /* @mpx-else */
  color: red;
  /* @mpx-endif */
  font-size: 18px;
}
</style>

想问一下怎么解决这个问题，毕竟SCSS用起来方便一些

[BlackGan]

先将sass-loader中的sassOptions中的outputStyle配置修改下吧，目前默认配置的是compressed，这个配置会将scss中的注释给清楚掉，可以先修改为 expanded，我们后续在脚手架中也进行下修改

[vivine]

先将sass-loader中的sassOptions中的outputStyle配置修改下吧，目前默认配置的是compressed，这个配置会将scss中的注释给清楚掉，可以先修改为 expanded，我们后续在脚手架中也进行下修改

我试了一下还是不行，编译出来是这样的：

.title{color:blue;color:red;font-size:18px}

我的loader是这么配置的：

// mpx的loader配置在这里传入
// 配置项文档：https://www.mpxjs.cn/api/compile.html#mpxwebpackplugin-loader
module.exports = {
  // 自定义 loaders
  loaders: {
    // [2022-06-15] 增加 scss 支持
    scss: [
      {
        loader: 'sass-loader',
        options: {
          sassOptions: { outputStyle: 'expanded' }
        }
      },
      { loader: 'css-loader' }
    ]
  }
}

[BlackGan]

可以上传下你的复现demo哈

[Dong Hongping]

先将sass-loader中的sassOptions中的outputStyle配置修改下吧，目前默认配置的是compressed，这个配置会将scss中的注释给清楚掉，可以先修改为 expanded，我们后续在脚手架中也进行下修改

我试了一下还是不行，编译出来是这样的：

.title{color:blue;color:red;font-size:18px}

我的loader是这么配置的：

// mpx的loader配置在这里传入
// 配置项文档：https://www.mpxjs.cn/api/compile.html#mpxwebpackplugin-loader
module.exports = {
  // 自定义 loaders
  loaders: {
    // [2022-06-15] 增加 scss 支持
    scss: [
      {
        loader: 'sass-loader',
        options: {
          sassOptions: { outputStyle: 'expanded' }
        }
      },
      { loader: 'css-loader' }
    ]
  }
}

目前新版mpx不需要在loader options中配置rules了，目前这个配置已经废弃了，可以直接去webpack config的module.rules中进行配置