们来看一下SCSS和Sass，浏览一下所有CSS和SCSS代码，您需要从这种样式语言开始。

在这篇文章中，我想介绍并讨论SCSS的功能。如果您是SCSS的新手并且您真的没有阅读过很多内容，那么您一定要阅读此博客以获取所有信息。

Sass（Syntactically awesome style sheets）是一种样式表语言，最初由Hampton Catlin设计，由Natalie Weizenbaum开发。Sass是一种预处理器脚本语言，可以解释或编译成层叠样式表（CSS）。SassScript本身就是脚本语言。拥抱Sass一次，你可能永远不想再回到vanilla CSS了。直到最近，当我不得不在一个项目中切换回vanilla CSS时，我才意识到我多么喜欢和Sass一起工作。在那段时间里，我学到了很多，所以我决定赞美萨斯，让这个世界变得更美好，让你变得更快乐。

如何使用Sass

像Sass这样的预处理器在我们的RoR世界中被广泛使用，使得编写CSS变得更加容易和无杂乱。大多数Rails开发人员都知道诸如嵌套，引用选择器，变量，mixin或扩展指令等优点。但萨斯远不止于此！

Sass包括两种类型的扩展名：.scss和.sass。“.scss”文件扩展名完全符合CSS语法，而.sass不完全符合CSS语法，但写入速度更快。

让我们从一些安装和使用Sass的基本技巧开始。

有两种方法可以使用应用程序或命令行启动SCSS。

使用命令行查看Sass文档以进行安装。

变量

我们可以在变量中定义一个元素，并在我们的Sass代码中插入它。将模块保存在单独的文件中时，这非常有用。变量的最常见用途是调色板，存储可以在单独的样式表中使用的字体声明，大小和媒体查询等信息。

例如

$body: #226666;

$primary-color: #403075;

$footer: #AA8439;

$font-stack: Helvetica, sans-serif;

以代码开头的代码 $ 是Sass变量。您可以稍后在样式表中使用这些变量，它们将映射到您定义的值，例如：

body {

background: $body;

font: $font-stack;

}

.header {

color: $primary-color;

}

a {

color: $primary-color;

}

使用SCSS嵌套

嵌套是SCSS最受欢迎的功能之一。使用嵌套，您可以在声明的大括号之间添加类。SCSS将非常直观地编译和处理选择器。您甚至可以使用“ &”字符来获取对父选择器的引用。

以下示例显示了基本网页的结构：

嵌套风格

以下样式用于创建上面的示例：

header{

padding:10px

background-color: $grey

text-align:center;

.logo{

display:inline-block;

width:140px;

}

nav {

ul {

margin: 0;

padding: 0;

list-style: none;

li {

display: inline-block;

a {

display: block;

padding: 6px 12px;

text-decoration: none;

&:hover{

text-decoration:underline;

}

}

}

}

}

section{

background-color: $grey;

display:inline-block;

width:70%;

border:1px solid $grey;

color: $text-color;

}

aside{

background-color: $grey;

display:inline-block;

width:30%;

border:1px solid $grey;

color: $text-color;

}

footer{

padding:10px;

.copyright{

text-decoration:none;

padding:5px;

&:hover{

text-decoration:underline;

}

}

}

大！现在我们现在如何嵌套样式工作。我们来看看相应的CSS：

header{

padding:10px

background-color: #ded3d4;

text-align:center;

}

header .logo {

display:inline-block;

width:140px;

}

header nav ul{

margin: 0;

padding: 0;

list-style: none;

}

header nav ul li{

display: inline-block;

}

header nav ul li a{

display: block;

padding: 6px 12px;

text-decoration: none;

}

header nav ul li a:hover{

text-decoration:underline;

}

section{

background-color: #ded3d4;

display:inline-block;

width:70%;

border:1px solid #ded004;

color: #555;

}

aside{

background-color: #ded3d4;

display:inline-block;

width:30%;

border:1px solid #ded004;

color: #555;

}

footer{

padding:10px;

}

footer .copyright{

text-decoration:none;

padding:5px;

}

footer .copyright:hover{

text-decoration:underline;

}

Mixins和Extends

Mixins和extends是强大的功能，有助于避免大量重复。使用mixins，您可以制作参数化CSS声明，并在整个样式表中重复使用它们。

假设你有一个盒子，你想给盒子圆角：

@mixin border-radius（$ round）{

-webkit- border-radius：$ round ;

-moz- border-radius：$ round ;

-ms- border-radius：$ round ;

border-radius：$ round ;

}

/ *只需使用'@include'指令来应用mixin * /

.box { @include border-radius（15px）; }

请注意@mixin 顶部的 指令。它已被赋予名称 border-radius 并使用变量 $round 作为其参数。此变量用于设置每个元素的半径值。之后，@include 使用参数值调用该 指令，即15px。

这是相应的CSS：

.box {

-webkit- border-radius：15px ;

-moz- border-radius：15px ;

-ms- border-radius：15px ;

border-radius：15px ;

}

如果要在使用@including 指令时为每个角添加不同的大小 ，也可以这样做; 你只需要指定如下：

.box { @include border-radius(15px 10px 5px 0px); }

您可以创建自己的mixin库，或者更好的是，您可以使用其中一个社区库。

该 @extend 指令被称为Sass最强大的功能之一。此指令允许您将属性从一个选择器共享到另一个选择器。

假设你声明一个包含属性的公共类：

.box {

margin: 10px;

padding: 10px;

border: 2px solid blue;

}

现在你想要两个具有相同属性但具有不同边框颜色的类似盒子。

.box-red {

@extend .box;

border-color: red;

}

.box-yellow {

@extend .box;

border-color: yellow;

}

在上面的例子中，我们使用@extend 指令扩展了公共类 。让我们看看我们需要的完整SCSS来获得所需的输出。

.box, .box-red, .box-yellow {

margin: 1em;

padding: 1em;

border: 2px solid red;

}

.box-red {

border-color: red;

}

.box-yellow {

border-color: yellow;

}

import

@import 将由Sass处理，我们所有的CSS和SCSS文件将被编译为一个文件，最终将在我们的实际网站上。您可以创建包含很少CSS的部分Sass文件，您可以将其包含在其他Sass文件中，即variable.scss，fonts.scss，buttons.scss等，然后我们可以在main / style中包含所有SCSS文件.scss文件夹。如果不导入部分文件，则可以使用mixin和variable等可重用组件。

假设您已经创建了多个文件，并且需要将它们导入main.scss文件：

@import “variables”;

@import “fonts”;

@import “base”;

@import “buttons”;

@import “layout”;

唯一的缺点是为要导入的每个CSS文件触发单独的HTTP请求。

载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。

原文出处：https://wanago.io/2018/07/16/webpack-4-course-part-two-webpack-4-course-part-two-loaders/

今天继续我们的Webpack 4入门教程。在介绍了Webpack的基本概念之后，是时候更深入一点了。这次我们会涉及Webpack中非常强大的一个东西:loader。首先，我们会学习如何使用那些可用的loader。它将包括如何处理css、scss、图片以及对老版本的JavaScript语言的转换。让我们开始吧！

Webpack 4 入门教程继续 - 什么是loaders？

在之前的教程，我说Webpack是一个打包器。但这不是它仅有的目的。虽然Webpack天生只能理解JavaScript文件，但可以利用loader来改变这一点。除了能够处理多种类型的文件，Webpack还能修改它们。

添加loader

使用loader最好的方式是在webpack.config.js文件中指定它们。要这么做，你需要添加module.rules属性。

css-loader

css-loader能够翻译引入的css文件。

npm install css-loader

考虑如下的配置

// webpack.config.js
module.exports={
 module: {
 rules: [
 {
 test: /\.css$/,
 use: 'css-loader'
 }
 ]
 }
};

rules

rules 这个属性是一个数组，指明你的各个loader。它会作用于匹配到 test 属性所指定规则的每一个文件。这个规则，实际上，是一个正则表达式。

use

属性 use 指明需要对匹配的文件应用那个loader。

串联多个loader

有了上面的代码，你就能够在你的JavaScript代码中导入css文件了。（例如，使用之前我们提到的ES6模块）

但这还不能让css真正生效。我们需要一种方法让浏览器能够使用这些css。这种情况下，style-loader就派上用场了。

npm install style-loader

但那就意味着要对css文件使用两个loader。你可以通过串联多个loader(chaining loaders)来使它们都生效。

// webpack.config.js
module.exports={
 module: {
 rules: [
 {
 test: /\.css$/,
 use: ['style-loader', 'css-loader']
 }
 ]
 },
}

你可以看到，我们给了 use 属性一个数组。一个非常重要的注意点是，串联执行的顺序是反向的（译者注：也就是从右往左）。

/* style.css */
body {
 background-color:black;
}
// index.js
import './style.css'

使用上面的配置，打包的工作方式大概是:

1. Webpack尝试解析 style.css 文件
2. 文件名与正则表达式/\.css$/匹配
3. 文件被 css-loader 编译
4. css-loader 处理后的结果会被传到 style-loader
5. 最后，style-loader 返回一串JavaScript代码

默认情况下，打包后的输出是./dist/bundle.js。现在，这个文件包含的代码会把所有的样式插入到<style>标签里面。如果你在HTML中引入了bundle.js的连接，在执行完脚本后，HTML会看起来像这样:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Webpack App</title>
 <style type="text/css">body {
 background-color:black;
 }</style></head>
 <body>
 <script type="text/javascript" src="bundle.js"></script>
 </body>
</html>

sass-loader

有了这些知识，你可以轻松地给你的工程添加sass/scss支持了。你可以在这里使用 sass-loader。

npm install sass-loader

只需要在你的loader链里插入它:

// webpack.config.js
module.exports={
 module: {
 rules: [
 {
 test: /\.scss$/,
 use: ['style-loader', 'css-loader', 'sass-loader']
 }
 ]
 },
}

就是这样，现在你可以引入scss文件了！文件在被 css-loader 解析之前，会从scss转译成纯css。

（译者注: 如果安装完sass-loader后，本地运行Webpack出现了和node-sass相关的错误，可尝试再安装一个node-sass的包解决这个问题，即npm install node-sass）

给loader传入选择项

实际上，loader可以接受一些选择项。让我们用 url-loader 为例来说明。

npm install url-loader file-loader
// webpack.config.js
module.exports={
 module: {
 rules: [
 {
 test: /\.scss$/,
 use: ['style-loader', 'css-loader','sass-loader']
 },
 {
 test: /\.(png|jpg|gif)$/,
 use: [
 {
 loader: 'url-loader',
 options: {
 limit: 5000
 }
 }
 ]
 }
 ]
 }
};

注意，如果你想要给loader传入配置项，你不再是把loader以字符串形式给 use 属性。现在它是一个对象，包含两个属性: loader（即loader的名字），和 options。

url-loader会把你的图片转换为base64格式的URI。如果你的图片文件很小，那么把它们直接引入到代码中会有更好的性能。这可以减少浏览器所发的请求数。但是，如果你的图片文件很大，那么把它们作为单独的文件引入可能会更好，因为浏览器可以并行加载它们。

这就是为什么 url-loader 有一个 limit 属性。它指明了一个文件大小（以byte为单位），当超过这个大小时，文件将不会被转为base64的URI。相比较而言，file-loader 仅仅是被用来拷贝你的文件。

body {
 background-image: url('./big-background.png');
}
.icon {
 background-image: url('./icon.png');
}

上面的配置会得到下面的结果：

<style type="text/css">body {
 background-image: url(ca3ebe0891c7823ff1e137d8eb5b4609.png); }
.icon {
 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAALElEQVR4AWMYIWAU1FPLoP9AXEFI0QEi8H+YYdQyqIEaXuumRhh1DZdUMwoATlYWfwh9eYkAAAAASUVORK5CYII=); }
</style>

因为big-background.png比限制的大小更大，它被拷贝至dist文件夹，并被起了一个随机的名字。而相反，icon.png文件被转换为了base64 URI。

使用babel转译JavaScript

另一个流行的loader是 babel-loader。它允许你使用Babel转译JavaScript文件。它解决了如何使用最新版本的JavaScript来编写代码的问题。如果你想支持老版本的浏览器，或者想使用现代浏览器还没有实现的功能，Babel都能够帮到你。

npm install babel-loader @babel/core @babel/preset-env

（译者注：原文的babel-core和babel-preset-env依赖被替换为@babel/core和@babel/preset-enve，因为新版本的Babel7中对官方提供的依赖使用了命名空间@babel）

module.exports={
 module: {
 rules: [
 {
 test: /\.js$/,
 exclude: /(node_modules)/,
 use: {
 loader: 'babel-loader',
 options: {
 presets: ['@babel/preset-env']
 }
 }
 }
 ]
 }
};

注意到，我们这里使用了 exclude 属性，它也是一个正则表达式。如果任何文件与这个表达式相匹配，它将不会被转译。

这里有很多预置项可以满足你的需求。查阅Babel的官方文档，你可以在那里找到它们的列表。

总结

这一次我们学习了Webpack很有用的一个功能：loader。我们介绍了一些可用的loader。利用它们，我们在项目中添加上了对scss的支持。此外，我们还学习如何使用 url-loader 处理图片。另外一个loader的常用之处是我们讨论的利用Babel转译JavaScript。在教程未来的部分，我们会深入到loader中，包括写一个我们自己的loader。

关于葡萄城：

赋能开发者！葡萄城公司成立于 1980 年，是全球领先的集开发工具、商业智能解决方案、管理系统设计工具于一身的软件和服务提供商。西安葡萄城是其在中国的分支机构，面向全球市场提供软件研发服务，并为中国企业的信息化提供国际先进的开发工具、软件和研发咨询服务。葡萄城的控件和软件产品在国内外屡获殊荣，在全球被数十万家企业、学校和政府机构广泛应用。?