scss文件里的条件编译失败

[devilwjp]

问题描述
版本2.0.0-24120191114004，在scss文件内使用条件编译变得无效，老版本可以
App.vue中引入common.scss，编译后，添加了条件编译的样式也被编译进了main.wxss中

复现步骤
common.scss

/* #ifdef H5 */
::-webkit-scrollbar {
    width: 0;
    height: 0;
}  
/* #endif */

App.vue

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
@import "./scss/common.scss";
@import './scss/theme.scss';

/*每个页面公共css */
uni-page-body {
  height: 100%;
}
</style>

预期结果
main.wxss中应该不包含

::-webkit-scrollbar {
    width: 0;
    height: 0;
}  

实际结果
main.wxss中包含了
::-webkit-scrollbar{width:0;height:0}

系统信息:

• 发行平台: [微信小程序]
• 操作系统 [windows]
• uni-app版本 [2.0.0-24120191114004，npm run dev:mp-weixin]
• 设备信息 [微信开发工具]

补充信息
老版本的scss不会被压缩，注释也不会被去除，2.0.0-24120191114004会去除注释并且压缩，我分析可能uni是对scss先进行了压缩去除了注释，导致了条件编译被过滤

[javascriptchen]

你写的条件编译不是h5的吗？你写小程序的才能不被编译到小程序的

[devilwjp]

你写的条件编译不是h5的吗？你写小程序的才能不被编译到小程序的

我希望通过这个条件编译，只在H5里生效，在打包成微信小程序不希望出现这个样式，请注意我的系统信息，npm run dev:mp-weixin

[devilwjp]

再提供一个线索，在css文件里，条件编译有效，在scss文件里无效 @javascriptchen

[javascriptchen]

好的，我们检查一下

[javascriptchen]

App.vue中引入common.scss

/* #ifdef H5 */
.test-class{
	color:red;
}
/* #endif */

h5

微信小程序

测试代码
1013-scss.zip
不过我的版本是2.0.0-24220191115005，你看下是不是更新了就好了

[liuyingqq123]

好的，我们检查一下

能帮忙看下https://github.com/dcloudio/uni-app/issues/1008这个问题吗?
自定义的平台,
// #ifdef 无法用or的条件

[devilwjp]

@javascriptchen 你的测试用例里，如果将App.vue的<style>标签加上lang="scss"，就会导致common.scss中的条件编译失败

[devilwjp]

@javascriptchen 你的测试用例里，如果将App.vue的<style>标签加上lang="scss"，就会导致common.scss中的条件编译失败

@javascriptchen 这个应该是个比较明确的bug了，所以我们现在只能退回0.9.503的版本了，希望尽快进行修复

[javascriptchen]

1013-scss.zip



你hx版本是多少？

[devilwjp]

@javascriptchen 我们没有使用hbuiderX开发，直接走本地node_modules安装的，你提供的用例，在style标签加上lang="scss"之后，提示没有安装sass-loader和node-sass，手动安装之后，运行npm run dev:mp-weixin，common.css里的条件编译就会失败，微信小程序的main.wxss里还是会出现test-class

[javascriptchen]

@javascriptchen 我们没有使用hbuiderX开发，直接走本地node_modules安装的，你提供的用例，在style标签加上lang="scss"之后，提示没有安装sass-loader和node-sass，手动安装之后，运行npm run dev:mp-weixin，common.css里的条件编译就会失败，微信小程序的main.wxss里还是会出现test-class

是一样的，你重新打开我新发的测试用例试试？我这边也是用命令行起的服务。

[devilwjp]

@javascriptchen
我又重新跑了一点，可以肯定问题依旧存在，我是windows系统，我在其他的mac系统上也是如此，截图日志如下

npm源用的是taobao

修改完lang="scss"后报sass-loader未安装

然后安装sass-loader和node-sass，安装后的版本如下

然后npm run dev:mp-weixin进行编译，编译完成后，进入dist/dev/mp-weixin/common/main.wxss查看，发现出现了.test-class（PS，App.vue中去除lang="scss"，main.wxss中就不会出现test-class）

[javascriptchen]

你用我最新发的代码压缩包，看你用的是老的
我新的代码里面依赖有node-sass

[devilwjp]

@javascriptchen 不好意思，前面没看到最新包，刚才下了，但是问题依旧，也不是我一个人的情况，但是在0.9.503的版本是好的

[javascriptchen]

@javascriptchen 不好意思，前面没看到最新包，刚才下了，但是问题依旧，也不是我一个人的情况，但是在0.9.503的版本是好的

我也在App.vue里面设置了lang=“scss“啊 你node版本多少，我装一个试试，我是8.12

[devilwjp]

@javascriptchen 10.8.0

[javascriptchen]

你装nvm，用8.12.0就可以了，我这边一直用的就是8.12.0

[devilwjp]

@javascriptchen

实在没办法，看了下源码，发现确实有问题，@dcloudio/vue-cli-plugin-uni/lib/chain-webpack.js中，是在sass-loader之前，插入的webpack-preprocess-loader，因为common.scss不是在js中被引入的，是在style里引入的，是直接被sass-loader内部消费，消费前就直接是@import "common.scss"，而默认没有设置sassOptions的outputStyle，默认是nested的，最新版本的node-sass的nested是去除注释的，导致在css-loader之后已经消费不到条件编译了。

我尝试在@dcloudio/vue-cli-plugin-uni/lib/option.js里设置sassOption的outputStyle为expanded就完全正常了，因为css-loader之后可以消费到

chain-webpack.js

option.js

[devilwjp]

@javascriptchen

我现在直接在vue.config.js里修改了sassOptions，这样我的项目就可以用最新的uni版本了

vue.config.js

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                sassOptions:{
                    outputStyle: 'expanded'
                }
            }
        }
    }
}

PS：虽然暂时找到解决方案，但是我觉得并不应该让使用者自己去配置这个步骤，依靠降级node来解决最新版node-sass默认去除注释的问题也不是一个好的解决方案，应该直接在uni的option里直接显性的声明不去注释才是正道，所以这个issue暂不关闭

[fxy060608]

@javascriptchen

实在没办法，看了下源码，发现确实有问题，@dcloudio/vue-cli-plugin-uni/lib/chain-webpack.js中，是在sass-loader之前，插入的webpack-preprocess-loader，因为common.scss不是在js中被引入的，是在style里引入的，是直接被sass-loader内部消费，消费前就直接是@import "common.scss"，而默认没有设置sassOptions的outputStyle，默认是nested的，最新版本的node-sass的nested是去除注释的，导致在css-loader之后已经消费不到条件编译了。

我尝试在@dcloudio/vue-cli-plugin-uni/lib/option.js里设置sassOption的outputStyle为expanded就完全正常了，因为css-loader之后可以消费到

chain-webpack.js

option.js

出现该问题是，是因为 build 模式下，sass-loader 如果不主动传入 outputStyle，会默认成 compressed

[flyromance]

怎么还有这个问题？我在pages中某个vue文件，<style lang="scss" scoped>中写 条件注释页不生效。。。

[devilwjp]

@flyromance 应该已经没有这个问题了，问题已经关闭了，你uni-app什么版本？

[wusp1994]

问题依然存在，https://ask.dcloud.net.cn/question/85884

[wusp1994]

现在变成了，dev可以，build后scss文件中能不能实现条件编译。 @javascriptchen