weex-vue-loader 0.6.1 sass 变量支持有问题

PerseveranceZ commented 6 years ago

这里是 weex-loader 相关 issue 链接

升级到

weex-loader 0.7.2
weex-vue-loader 0.6.1

code:

<style lang="sass" scoped>
$base-color: #1da1f2;

.header {
  padding-top: 45px;
  width: 750px;
  height: 117px;
  background-color: $base-color;
  color: #FFFFFF;
}

sass 中变量的写法原来项目中没有问题，升级后项目中会报

../eros-cli/node_modules/_weex-vue-loader@0.6.1@weex-vue-loader/lib/style-loader.js!../ero
s-cli/node_modules/_weex-vue-loader@0.6.1@weex-vue-loader/lib/style-rewriter.js?id=data-v-341f7de2!../eros-cli/node_modu
les/_weex-vue-loader@0.6.1@weex-vue-loader/lib/selector.js?type=styles&index=0!./src/js/pages/demo/components/header.vue
(Emitted value instead of an instance of Error) ERROR: Selector `$base-color: #1da1f2;
.header` is not supported. Weex only support single-classname selector
NonErrorEmittedError: (Emitted value instead of an instance of Error) ERROR: Selector `$base-color: #1da1f2;
.header` is not supported. Weex only support single-classname selector
    at Object.emitWarning (/Users/yangmingzhe/Work/opensource/eros-cli/node_modules/_webpack@3.11.0@webpack/lib/NormalMo
dule.js:117:16)
    at obj.log.map (/Users/yangmingzhe/Work/opensource/eros-cli/node_modules/_weex-vue-loader@0.6.1@weex-vue-loader/lib/
style-loader.js:41:20)
    at Array.map (native)
    at /Users/yangmingzhe/Work/opensource/eros-cli/node_modules/_weex-vue-loader@0.6.1@weex-vue-loader/lib/style-loader.
js:37:17
    at Object.parse (/Users/yangmingzhe/Work/opensource/eros-cli/node_modules/_weex-styler@0.3.0@weex-styler/index.js:16
1:3)
    at genStyleString (/Users/yangmingzhe/Work/opensource/eros-cli/node_modules/_weex-vue-loader@0.6.1@weex-vue-loader/l
ib/style-loader.js:30:10)
    at Object.module.exports (/Users/yangmingzhe/Work/opensource/eros-cli/node_modules/_weex-vue-loader@0.6.1@weex-vue-l
oader/lib/style-loader.js:5:32)
 @ ./src/js/pages/demo/components/header.vue 5:20-370
 @ ../eros-cli/node_modules/_weex-vue-loader@0.6.1@weex-vue-loader/lib/script-loader.js!../eros-cli/node_modules/_babel-
loader@7.1.4@babel-loader/lib!../eros-cli/node_modules/_weex-vue-loader@0.6.1@weex-vue-loader/lib/selector.js?type=scrip
t&index=0!./src/js/pages/demo/components/core.vue
 @ ./src/js/pages/demo/components/core.vue
 @ ../eros-cli/node_modules/_weex-vue-loader@0.6.1@weex-vue-loader/lib/script-loader.js!../eros-cli/node_modules/_babel-
loader@7.1.4@babel-loader/lib!../eros-cli/node_modules/_weex-vue-loader@0.6.1@weex-vue-loader/lib/selector.js?type=scrip
t&index=0!./src/js/pages/demo/index.vue
 @ ./src/js/pages/demo/index.vue?entry=true,../eros-cli/node_modules/_weex-vue-loader@0.6.1@weex-vue-loader/lib/style-lo
ader.js!../eros-cli/node_modules/_weex-vue-loader@0.6.1@weex-vue-loader/lib/style-rewriter.js?id=data-v-f2b3cca6!../eros
-cli/node_modules/_weex-vue-loader@0.6.1@weex-vue-loader/lib/selector.js?type=styles&index=0!./node_modules/_weex-ui@0.3
.13@weex-ui/packages/wxc-tab-bar/index.vue

@erha19 项目回到依赖 weex-loader: '^0.5.2' 就好了

PerseveranceZ commented 6 years ago

之前 issue 中的配置已经失效，因为 weex-loader 加入了数组校验，必须用数组方式注入。

     {
                test: /\.vue(\?[^?]+)?$/,
                use: [{
                    loader: 'weex-loader',
                    options: {
                        loaders: {
                            sass: ['sass-loader'],
                            scss: ['sass-loader'],
                            less: ['less-loader'],
                            stylus: ['stylus-loader']
                        }
                    }
                }]
            }

finnome commented 6 years ago

@PerseveranceZ 嵌套的sass不生效，但是声明变量可以生效。什么原因呢？

.a {
    font-size: 16px;
    .b {
       // 这里的css不会被编译出来
       font-size: 20px; // 无效
    }
}

PerseveranceZ commented 6 years ago

weex 文档中有说明 @pcwang0205

weexteam / vue-loader-for-apache-weex

weex-vue-loader 0.6.1 sass 变量支持有问题 #26