zoukankan      html  css  js  c++  java
  • node-sass报错解决方法

    在Vue.js中,每一个vue文件都是一个组件,在.vue文件中可以将模板,脚本,样式写在一起,便于组织整个组件。在使用template,script时,编写css样式时,都进行的特别顺利,唯独当我想用sass来预处理css时,在style下使用lang='sass'一直报错。

    在.vue中是这样的。

    <template >
    <div class="haha">
        <p>
            keith + {{ message }}
        </p>
    </div>
    </template>
    
    <script>
    export default {
        data () {
            return {
                message: ' Hello world'
            }
        }
    }
    </script>
    
    <style lang = 'sass' scoped>
        
    </style>

    运行webpak就报错。

    我相信很多人跟我一样,在安装node-sass都会报出这个错误。经过一个下午的折腾,终于找到知道原因了。

    解决方法 :

    1. 找到node_modules下的node-sass文件,进入,如果没有vendor文件夹,就创建一个空文件夹,命名为vendor。
    2. 运行 webpack 。
    3. 接着还是报错。
    4. 错误显示 在vendor文件夹下找不到某个 .node文件,此时到node-sass官网的release页面下找到相应的文件,然后下载到相应的文件目录。传送门:node-sass官网 记住下载相应的版本。
    5. 完成之后,运行webpack...等待中。
    6. 如果成功了,恭喜你,可以在vue文件中使用sass来预处理css了。如果没有成功,还是会报错。错误信息如下。
    7. 提示让我们重新rebuid node-sass,这是因为我们在前几步中重新加入了一个文件,而此时webpack并没有执行到。于是乎,打开cmd,运行

      cnpm rebuild node-sass --save-dev

    8. 执行webpack。
    9. 编译成功!


    这里给自己在学习webpack遇到的问题做一些记录,同时希望其他遇到同样问题的朋友可以避免。

  • 相关阅读:
    .NET 开源GIS解决方案一 概述
    未能正确加载“Microsoft.VisualStudio.Editor.Implementation.EditorPackage”包
    C# Winform欢迎窗体实现()
    Log4Net使用指南(转)
    DotNet经典面试题(转载)
    这是一篇测试文章
    每天进步一点点
    博客园公告栏添加两个有趣的控件
    eclipse下查看maven下载的源码中文乱码问题
    WEB 基础知识(一)
  • 原文地址:https://www.cnblogs.com/chenliyang/p/6552625.html
Copyright © 2011-2022 走看看