今天看视频教程的时候发现老师的样式文件改用了scss(然鹅我买的1块钱特价课程其实是节选出来的,所以前面没有看到过关于scss的介绍) 然后我本以为把原来的css改名字为scss就行,然鹅没有效果. 百度后发现还需要安装,具体安装方法https://www.sass.hk/install/ 我用这里的提供的网址去到https://rubyinstaller.org/downloads/ 开始下载ruby-devkit的之后安装一直没成功,都在最后关头失败了. 然后跑去下载一个没有devkit的版…

Ruby的安装 如果是Window系统,请打开:http://rubyinstaller.org/downloads/ ,下载当前稳定版本的exe文件.界面如下所示: Step(2): 接下来,在系统上运行来安装Ruby. Step(3): 接下来,添加Ruby的bin文件夹到PATH用户变量和系统变量以使用 gem 命令工作. Step(4): 在系统中打开命令提示符,然后输入以下命令行. 假定你已经安装好了Ruby,接着在命令行输入下面的命令: gem install sass 然后,就可以…

通过vue-cli搭建的项目如果想使用scss的话除了安装sass-loader,还需要安装node-sass cnpm install sass-loader node-sass -D…

css 预处理器 CSS 预处理器用一种专门的编程语言,进行 Web css编码,然后再编译成正常的 CSS 文件,以供项目使用:说简单点就是在某个环境下写css 可以写变量.表达式.嵌套等,在通过该环境将css预处理的语言编译成正常的css文件; sass与scss 学习网站:  http://sass.bootcss.com/ sass是采用Ruby语言编写的一款css预处理语言.Sass的缩进语法,对于写惯css前端的web开发者来说很不直观,也不能将css代码加入到Sass里面,因此sa…

Css.Sass.Scss的含义及区别 Css(Cascading Style Sheets) 层叠样式表 Sass(Syntactically Awesome StyleSheets) 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables).嵌套 (nested rules).混合 (mixins).导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅 使用 Sass 以及 Sass 的样式库有助于更好地组织管理样式文件,…

Demo2操作手册 本Demo演示如何配合各种loader进行稍复杂的使用 准备环境 初始化环境, cd到demo目录之后, 执行如下命令: npm init -y npm install webpack webpack-cli -D L2 Typescript Typescript作为JavaScript的超集收到越来越多的开发者的欢迎. Webpack要打包Typescript需要安装: npm install typescript ts-loader -D 新建一个typescript的配…

为什么要使用第三方loader 一般引入样式文件,我们会在html中引入样式标签. 很明显,这样就跟之前在script中引入js文件一样,会导致二次请求.我们希望webpack像处理js文件一样处理样式文件. 如何引入样式 于是我们在入口文件,在main.js中通过import方式引入样式文件. 如何配置css-loader 引入完成后,我们通过npm run dev运行项目会发现,webpack报错如下: 提示:没有合适的loader来解析这种类型的文件 注意: webpack默认只能打包处理…

前言 本文是基于我厂基友的Webpack学习系列(一)初学者使用教程 这篇文章做构建.可能基友的文章是基于Mac环境,我是windows环境,在学习时遇到了很多坑,询问基友,他让我搞个基于windows环境的,我想了想,正好这几天需求不多,webpack3.0也来了,那就干吧! 什么是webpack? Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载.…

前言 之前是用Vue的,现在由于工作原因,开始使用Angular.分别是Vue2和Angular5入的坑.只是从使用上来对比总结,加深记忆,避免混淆. 什么 ?  你问实现原理的异同及优劣? 本宝宝还在努力学习中,也许有生之年你可以看到分析贴. 不管用什么框架,创建项目都是第一步.发展到现在,Angular 和 Vue 都有官方的脚手架用来快捷的创建和配置项目. 创建项目 Angular和Vue的脚手架都依赖于NodeJs和Npm,所以先确认自己的环境.两个脚手架都需要全局安装 //Angula…

处理css文件 安装 npm i style-loader css-loader -D main.js import $ from 'jquery' //Es6中导入模块的方式 import './css/index.css' // import './css/index.css' webpack默认只能打包处理js类型文件 //如果需要处理非js类型的文件,我们需要手动安装一些合适的第三方loader加载器 // 1.打包处理css文件,需要安装 npm i style-loade css-l…