weex配置sass编译

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_40816649/article/details/101170197

先来看看通过weex脚手架安装的项目目录吧

这里面webpack的配置在webpack.config.js中。这里我启动项目执行的是执行的环境变量是common所以顺着环境变量找到configs/webpack.common.conf这个文件。在这个文件中我们要配置相关的sass-loader。
安装相关的loader插件

npm install vue-style-loader css-loader node-sass [email protected] --save

注意这里有个坑sass-loader不能直接安装最新版这里需要用7.3.1这个版本否则会报Modele build failed: TypeError: this.getResolve is not a function at Object.loader...这个问题。weex版本还不兼容最新版本的sass-loader，这个问题在vue-cli2.0的脚手架中也是一样的解决办法。
将下面这两个loader加入到configs/webpack.common.conf文件的module的rules数组中

      {
        test: /\.css$/, loader: 'style-loader!css-loader'
      },
      { 
        test: /\.(scss|sass)$/, loader: 'style-loader!css-loader!sass-loader'
      },

配置完成之后就可以在vue文件中使用sass了

<style lang="scss" scoped>
.test{
  font-size: 20px;
  .red{
    color: red
  }
}
</style>