webpack window 使用sass来编译css样式

简介: 1.执行安装: npm install sass-loader --save-dev (此处不行的话就换上npm install node-sass) 2.稍微修改一下config,删掉我们先前添加的css规则,加上下面的loader { test: /\.

1.执行安装:

npm install sass-loader --save-dev (此处不行的话就换上npm install node-sass)

2.稍微修改一下config,删掉我们先前添加的css规则,加上下面的loader


      {
        test: /\.scss$/, loaders: ['style', 'css', 'sass'], include: APP_PATH }, 

添加两个sass文件,variables.scss和main.scss

variables.scss


$red: red;

main.scss


@import "./variables.scss";

h1 { color: $red; } 

在index.js中引用


require('./main.scss');

然后发现标题如愿变红,相当简单吧。

来源:链接:http://zhuanlan.zhihu.com/p/20367175

目录
相关文章
|
2月前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
25天前
|
前端开发 JavaScript UED
|
2月前
|
前端开发 UED
Webpack 中处理 CSS 和图片资源的多 Loader 配置
【10月更文挑战第12天】 处理 CSS 和图片资源是 Webpack 配置中的重要部分。通过合理选择和配置多个 Loader,可以实现对这些资源的精细处理和优化,提升项目的性能和用户体验。在实际应用中,需要不断探索和实践,根据项目的具体情况进行灵活调整和优化,以达到最佳的处理效果。通过对 Webpack 中多 Loader 处理 CSS 和图片资源的深入了解和掌握,你将能够更好地应对各种复杂的资源处理需求,为项目的成功构建和运行提供坚实的基础。
61 1
|
2月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
194 1
|
2月前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
58 2
|
1月前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过<head>部分的<style>标签定义;外部样式表适用于多个页面,通过<link>标签引用外部CSS文件;<style>定义样式,<link>引用资源;已弃用的标签有<font>、<center>、<strike>,属性有color和bgcolor。
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
|
1月前
|
前端开发
HTML 样式- CSS1
CSS (层叠样式表) 用于为 HTML 元素添加样式,包括颜色、文本、盒子模型等。CSS 可以通过内联样式、内部样式表或外部引用的方式添加到 HTML 中。推荐使用外部引用方式。本教程将介绍如何使用 CSS 为 HTML 添加样式,并提供实例演示。
|
2月前
|
存储 前端开发 开发者
深入了解 Sass 和 SCSS:CSS 预处理器的强大功能
Sass(Syntactically Awesome Stylesheets)是一个强大的 CSS 预处理器,为开发者提供了诸多高级特性,如变量、嵌套、混合、继承等,简化了 CSS 的编写和管理。SCSS 是 Sass 3 引入的新语法,完全兼容 CSS3,并增强了 Sass 的动态功能。本文详细介绍了 Sass 和 SCSS 的核心特性及其在实际开发中的应用,如变量定义、嵌套规则、混合、继承、以及常用的操作符与扩展功能。
39 0
|
2月前
|
前端开发 开发者 容器
Vue3中Sass的安装与使用指南:轻松上手CSS预处理器
Vue3中Sass的安装与使用指南:轻松上手CSS预处理器
269 0