Sass

---恢复内容开始--- Webpack与Gulp、Grunt其实没有什么可比性，它可以看作模块打包机，通过分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。 　　他们的工作方式也有较大区别： 　　Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。 　　Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。 同时 webpack 为了解决可以 require 不同文件的需求引入了loader, 比如面对sass文件有 sass-loader, 把sass 转换成 css css-loader, 让 webpack 能识别处理 css style-loader, 把识别后的 css 插入到 html

背景概述 1. CSS预处理器 css预处理器定义了一种新的编程语言，编译后成正常的CSS文件。为CSS增加一些编程的特性，无需考虑浏览器的兼容问题，让CSS更加简洁，适应性更强，可读性更佳，更易于代码的维护等诸多。CSS 预处理器语言有 scss（sass）、less 等。 2.SASS和SCSS的区别 除了文件扩展名不同（分别是“.sass” 和 “.scss”）外，Sass是以严格缩进式语法规则来书写的，不带大括号和分号，而SCSS的语法和CSS书写语法类似。 项目引入 1.vue-loader 在讲如何在vue项目中使用scss之前，我们先来简单了解一个概念，那就是vue-loader。vue-loader是什么东西呢？vue-loader其实就是一个webpack的loader。用来把vue组件转换成可部署的js,html,css模块。所以我们如果要想再vue项目中使用scss,肯定要告诉vue-loader怎么样解析我的scss文件。 不了解webpack的同学可以先去自行百度。我这里就放一张图，看完大家可以也就能知道webpack能做些什么事情了。 2.安装SCSS 在webpack中，所有预处理器都要匹配相应的loader,vue-loader允许其他的webpack-loader处理组件中的一部分吗，然后它根据lang属性自动判断出要使用的loaders。所以

上一篇文章中，我主要分享了《 Webpack如何分离样式文件 》CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序,css预处理指的是在开发中我们经常会使用一些样式预编译语言，在项目打包过程中再将这些预编译语言转换成css。这些预编译语言具有便捷的特性，使用这些，可以减少代码编写，降低项目的开发和维护成本，提高开发效率。 目前比较流行的几种主要是Sass、LESS、Stylus、PostCSS，今天我主要分享的是Sass、LESS在webpack中的配置及使用情况。 Sass与SCSS Sass本身是对CSS的语法增强，它有两种语法，现在使用更多的是SCSS（对CSS3的扩充版本）。所以你会发现，在安装和配置loader时都是sass-loader，而实际的文件后缀是.scss。 sass-loader就是将SCSS语法编译为CSS，因此在使用时通常还要搭配css-loader和style-loader。类似于我们装babel-loader时还要安装babel-core，loader本身只是编译核心库与Webpack的连接器，因此这里我们除了sass-loader以外还要安装node-sass，node-sass是真正用来编译SCSS的，而sass-loader只是起到黏合的作用。 安装命令如下： npm install sass-loader node

###以下命令均在git管理员方式运行下执行 Laravel 项目中使用 Bootstrap 前端框架，需要先执行以下命令： $ composer require laravel/ui --dev 上面的命令安装完成后，使用以下命令来引入 Bootstrap ： $ php artisan ui bootstrap 更改引导文件package.json 建议直接导入以下内容，防止后续报错： { "private": true, "scripts": { "dev": "npm run development", "development": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "npm run development -- --watch", "watch-poll": "npm run watch -- --watch-poll", "hot": "NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js -

好端端的突然就报错了 【一】 之前新clone代码下来就直接初始化就可以，这次报错，貌似缓存的问题。如图 其实解决也很简单 清理缓存即可 输入 npm cache clean --force 重新 npm i 如果你已经初始过 可能需要删掉node_modules文件 【二】 如果你跟我一样很不幸遇到初始化继续报错 报错如下 那你在相应的链接 http://chromedriver.storage.googleapis.com/index.html 下载 其实这个步骤网上很多都说是成功的了 很奇怪我当天测试并不成功，可能会报错sass-loader等问题，其实安装后再执行然后又报错 回到跟chromedriver相关的。。。然后各种折腾，这里省略了，都说是折腾那就是没用的功夫。 【剧透，因为就是跟Chromedriver相关】 【加上当时git仓库地址迁移测试，失败到怀疑人生】 【有事耽搁了两天继续研究】 按照网上各种方式，镜像也重新更新了，还是报错。 最后有人建议我升级一下node【其实我的版本已经是10了】 【上网一查window升级太麻烦，感谢我懒，于是又开始思考Chromedriver这个问题】【还有个原因是怕影响到其他项目】 给你看看类似的错误 【说你非法操作只读文件。。。】 还是跟Chromedriver有关 【巧了】同事说也有这个问题

Sass和Compass设计师指南是《响应式Web设计：HTML5和CSS3实战》作者Ben Frain的又一力作。作者通过丰富、完整的案例，循序渐进地展示了Sass和Compass的使用方法。既使不懂编程的设计师读完本书也能轻松生成跨浏览器的、易于维护的CSS代码，并学会编写media query代码，进行响应式设计。本书适合交互设计师、UI设计师、网页设计师、前端开发工程师阅读。 作为CSS预处理器，Sass已经成为编写更简洁、更易于维护的跨浏览器支持的CSS代码的标准方法。它是对CSS功能的进一步增强，使以往复杂费时的任务变得简单。本书是对技术社区中精华内容的提炼，内容通俗直接，使广大读者，即使是只了解HTML和CSS的读者都能轻松掌握相关技术。 Sass和Compass设计师指南 目录： 第1章Sass和Compass概述7 第2章创建Sass和Compass工程33 第3章嵌套，扩展，占位符和混合宏55 第4章轻松玩转颜色87 第5章Sass和Compass的响应式弹性网格系统115 第6章Sass和混合宏中的高级mediaqueries147 第7章Compass中的CSS3、ImageSprites等功能167 第8章Sass的编程逻辑199 第9章精通Sass和Compass221 教程地址： Sass和Compass设计师指南 Ben Frain

一、概念 gulp 构建工具 我们可以通过给gulp配置不通的task（通过Gulp中的gulp.task()方法配置，比如启动server、sass/less预编译、文件的合并压缩等等）来让gulp实现不同的功能，从而构建整个前端开发流程。 webpack 打包工具 我们可以把开发中的所有资源（图片、js文件、css文件等）都可以看成模块，Webpack是通过loader（加载器）和plugins（插件）对资源进行处理的。 Gulp是对整个过程进行控制，所以在其配置文件（gulpfile.js）中配置的每一个task对项目中该task配置路径下所有的资源都可以管理。 gulp.task('sass',function(){ gulp.src('src/styles/*.scss') .pipe(sass().on('error',sass.logError)) .pipe(gulp.dest('./build/prd/styles/'));//编译后的输出路径 }); 上面这个task可以对 'src/styles/*.scss' 目录下的所有以 .scss 结尾的文件进行预处理。 Webpack则不是这样管理资源的，它是根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源(如下图)。通俗的说，Webpack就是需要通过其配置文件（webpack

根据预设的配色方案，在前端实现动态切换系统主题颜色。 大概的思路就是给html根标签设置一个data-theme属性，然后通过js切换data-theme的属性值，Scss根据此属性来判断使用对应主题变量。这里可以选择持久化Vux或接口来保存用户选择的主题。 一、首先需要给项目下载配置Scss 1.安装依赖 npm install node-sass sass-loader --save-dev 复制代码 2.找到build中webpack.base.conf.js,在rules中添加scss规则 { test : /\.scss$/, loaders: [ 'style' , 'css' , 'sass' v] } 复制代码 3.在vue文件中使用 <style lang= 'scss' scoped> </style> 复制代码 二、在vue项目全局中引入scss 1.安装 sass-resources-loader npm install sass-resources-loader --save-dev 复制代码 2.然后修改build中的utils.js 将 scss: generateLoaders( 'sass' ) 复制代码 修改为： scss: generateLoaders( 'sass' ).concat( { loader: 'sass-resources