sass报错解决方法,webpack从安装到起飞

作者: 航空航天  发布:2019-10-04

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

1.安装npm

   不管你想使用grunt,还是gulp,还是webpack,你都要用到npm,相信大家都对此不陌生了,npm是什么东东呢?npm其实是Node.js的包管理工具(package manager),因为我们使用各种框架会依赖需要多js代码包,而如果需要就到网上搜索下载解压在使用,会非常非常繁琐麻烦,所以npm就应运而生了,它是一个集中管理的工具,大家都会把自己开的模块打包后上传到npm官网,如果要使用直接通过npm下载安装即可。

   那么我们怎么安装npm,其实我们在安装node.js的时候npm就已经安装好了,所以我们要先安装node.js,安装完毕后我们就可以在命令行中输入npm -v,来查看npm版本。(命令行工具我在mac下使用的是iTerm2,windows可以安装git bash)

npm -v

 

在.vue中是这样的。

2.什么是webpack

什么是webpack,它有什么优点?

如果你有过gulp或grunt的使用经验,就不难理解webpack是个什么东东,webpack是一个前端工具,可以让各个模块进行加载、预处理,再进行打包,它有gulp和grunt的大部分基本功能,它的最大区别就是提供了模块化解决方案,可以把各种资源作为模块来使用和处理。

webpack的优点如下:

  1. webpack 遵循commonJS 的形式,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码迁移。

  2. 能被模块化的不仅仅是 JS ,所有的静态资源,例如css,图片等都能模块化,即以require的方式引入。

  3. 开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转base64等。

有一点注意的就是webpack的思路是把我们所有的require资源都整合集成到一个js文件中,我们通常命名为bundle.js

  • ### 问题描述:
<template >
<div class="haha">
    <p>
        keith + {{ message }}
    </p>
</div>
</template>

<script>
export default {
    data () {
        return {
            message: ' Hello world'
        }
    }
}
</script>

<style lang = 'sass' scoped>

</style>

3.安装和配置webpack

接下来我们就开始一步一步的安装使用webpack。(以下以mac为例)

我们先创建项目目录结构,根目录是webpack-demo,结构如下:(源码下载在文末)

项目结构

app文件夹下放置我们的开发文件,比如 index.scss文件和主逻辑main.js文件,以及作为模块文件的module1.js,将来main.js和module1.js都会整合到public目录下的bundle.js中,我们的index.html直接引用bundle.js即可。public目录就是浏览器执行需要的文件,包括index.html、将来index.sass生成的index.css和bundle.js。webpack.config.js是webpack的配置文件,稍后会详细说明。

原材料准备好了,接下来我们就开始正式安装webpack了。

1.我们首先要在根目录下生成package.json文件,它会显示以后我们通过npm安装的各种依赖包,我们通过终端进入根目录,执行:npm init

npm init

然后终端会让我们输入一堆信息,随便写即可。最后输入yes确认,会发现我们的根目录下自动生成了一个package.json文件

package.json

内容就是一堆json数据,基本就是我们刚才在终端里输入的信息,大致如下:

package.json

package.json生成好了我们先放一放。

2.接下来通过全局安装webpack

在终端执行cd -- 退回到全局,然后执行:(sudo) npm install -g webpack,mac下报错的话前面可能需要加sudo获取管理员权限(下同)。

这样就安装好了webpack,可以再全局通过webpack -v来查看是否安装成功。

3.然后我们进入项目根目录局部安装webpack,进入./webpack-demo,执行:npm install webpack --save-dev

npm install webpack --save-dev

如果看到了这一页说明局部安装webpack成功了。此时根目录下会出现一个node_modules文件夹。

node_modules

以后我们在根目录下通过npm安装的各种依赖包都会默认安装到这个文件夹下面。

现在我们项目的webpack框架就准备好了,接下来我们要使用它来处理各种东西了,拿最常见的css预处理来说吧,我个人常用sass,那么怎么用webpack来处理sass为我们所用呢,现在就来说说loader加载器。

  1. loader加载器。

webpack是通过loader加载器来管理使用各种插件和工具的,比如我们要使用sass,就要通过npm安装sass-loader加载器,然后在之前提到的 webpack.config.js文件中进行配置使用,我们要是使用es6语法,就要安装babel-loader来解析成js语法。接下来以sass-loader为例,

在项目根目录下执行:npm install sass-loader --save-dev

npm install sass-loader --save-dev

如上图,提示我们已经安装成功了,此时在看package.json文件,会发现与之前有所不同:

package.json

没错,它显示了我们刚才局部安装的webpack和sass-loader依赖项。文件默认安装到了node_modules目录下。表示我们已经可以使用sass-loader了。通常对css的处理我们还要在安装style-loader和css-loader。

有一点注意的是,默认sass-loader编译后的css会直接结成到index.html文件的header中去,而我们一般开发中都期望提取出一个css文件,再在html中link引入。所以我们还要用到webpack的plugins插件项目,再安装一个插件extract-text-webpack-plugin。此外还需要安装 style-loader,   css-loader。

继续执行: * *npm install style-loader --save-dev**

**                   npm install css-loader --save-dev**


**                   npm install extract-text-webpack-plugin --save-dev**


可以看到

package.json

style-loader和css-loader 和 extract-text-webpack-plugin安装完毕。

接下来终于开始看在webpack.config.js中怎样进行配置使用了。

我们的小飞机组装完毕,进入调试阶段。

  1. sass-loader

打开webpack.config.js文件,进行下图配置:

webpack.config.js

entry是页面中的入口文件,比如我这边的入口文件时main.js

output:是指页面通过webpack打包后生成的目标文件放在什么地方去,我这边是在根目录下生成public文件夹,指示webpack生成bundle.js放到里面

module.loaders:是文件的加载器配置,我们刚才安装了sass-loader,现在要通过extract-text-webpack-plugin插件将编译完成的css单独提取出来供我们使用。具体配置如图。

接下来我们看看index.html和index.scss以及main.js是怎样的。

html:

index.html

因为我们最终引用的是public下生成的bundle.js  和 index.css,所以如图写引用路径。这没啥好说的了。

scss:

index.scss

这里就直接写我们开发中的sass代码,坐等webpack编译成index.css输出到public中。

main.js

main.js

主js文件里,我们只引入scss文件,用强大的require语法简单粗暴。

蓝后,我们就可以在命令行执行 webpack -w 来启动webpack了!

关于webpack的启动方式:

webpack         // 最基本的启动webpack的方法

webpack -w      // 提供watch方法;实时进行打包更新

webpack -p      // 对打包后的文件进行压缩

webpack -d      // 提供source map,方便调式代码

小飞机,终于要起飞了~!

蓝而。。。。。。

error

一片片的红海啊。。有点刺眼,我们看看发生了什么,原来是提示没有安装node-sass模块,那么我们继续安装:

npm install node-sass --save-dev

安装报错提示我要安装xcode,经查node-sass依赖xcode安装时一并安装的一些文件,所以我又安装的xcode,再次运行,安装成功。

蓝后,

再次执行 webpack -w:



webpack -w

感动哭。。终于绿了,说明我们的webpack启动成功了,这时候再看文件目录,发现public目录下多了index.css和bundle.js,说明打包成功:

yes

我们直接浏览器打开index.html来看一看页面是否顺利生效。

index.html

看来是生效了,控制台也没有报错。说明我们的webpack对sass和js的编译和打包顺利完成!

  1. 接下来我们看一下js作为模块怎样来引入使用

我们之前新建了module1.js,我们把这个js文件作为一个模块来引入我们的main.js。编辑module1.js:

module1.js

我们先在控制台打印一串文本 hello webpack,然后在用exports方式暴露出两个方法供外部调用。

接下来在main.js中require:

main.js

我们在main.js中引入模块,然后赋给变量 mod,mod就可以调用模块暴露出来的方法!接下来就是见证奇迹的时刻:

html

看到这里我已经内牛满面...

我们的小飞机终于起飞了...

至此,webpack基本跑起来了,当然,我们还可以把vue、browserSync集成到webpack中,这里就先不说了,改日再另起文章分别说说browserSync和vue怎样集成到webpack中。

npm run dev 就报错,在安装node-sass错误

运行webpak就报错。
图片 1

4.最后

说实话这是我的第一篇正式内容的文章,以前傻乎乎的就没想过总结点什么,当然上面的内容也很简陋,介绍的不详细,也很可能会有不严谨或错误之处,限于本人水平,大家有不明白的地方可以搜一下其他大牛的经验,提出来一起进步。最近学习webpack也是翻了很多资料,接下来还要继续深入学习,前端之路,渐行渐远。。。不说了,要下班了,我还要去赶班车...886下了

附本文github源码链接:点此下载

用git克隆到本地:git clone

打开终端命令行工具进入到对应目录webpack-demo直接执行 webpack -w 即可。

  • ### 解决方法 :

本文由金沙澳门官网发布于航空航天,转载请注明出处:sass报错解决方法,webpack从安装到起飞

关键词:

上一篇:见证荣耀,这台显示屏让您看一天都不累
下一篇:没有了