umi中使用scss
在umi中可以直接使用css,但是并不支持scss,我们需要加两个loader,
直接npm安装 node-sass和sass-loader 即可,剩余的事情umi已经帮我们做好了。
npm i --save-dev node-sass sass-loader
在src/assets下新建文件夹
- assets
+ - img
+ - css
+ -style.scss // 这个样式文件一般来说存放全局的样式
在src/pages/index.js 引用style.scss
import '../assets/css/style.scss';
在home.js同级新建home.scss 文件
.home-container{
.red{
color:red;
}
}
在home.js引用,并修改render
// 第一种使用scss方法
// 使用这种方法的时候样式名称不能用 "-" ,不然在使用的时候会报错
...
import homeStyle from './home.scss';
... ...
render() {
return (
<div className={homeStyle.home_container}>
<p className={homeStyle.red}>Home 页面</p>
</div>
);
}
...
// 第二种使用scss方法
... import './home.scss'; ... ... render() { return ( <div className="home_container"> <p className="red">Home 页面</p> </div> ); } ...
用第二种方法的情况:
刷新页面发现并没有变化,打开浏览器调试窗口,查看sources
找到引用的css文件,搜索可以看到好像我们的样式确实是存在的,只不过被加上了其他的后缀(为了保证不会出现全局污染)
ps:这个问题当时我找了好久

这个是umi自己默认加上,我们并不想要这个东西,在.umirc.js文件中添加配置
...
cssLoaderOptions:{
localIdentName:'[local]'
}
...
umi中使用scss的更多相关文章
- 在项目中使用 SCSS
背景概述 1. CSS预处理器 css预处理器定义了一种新的编程语言,编译后成正常的CSS文件.为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代 ...
- Vue笔记:在项目中使用 SCSS
背景概述 1. CSS预处理器 css预处理器定义了一种新的编程语言,编译后成正常的CSS文件.为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代 ...
- 在vue项目中使用scss
1.首先安装依赖 npm install node-sass sass-loader --save-dev 2.找到build中webpack.base.conf.js,在rules中添加scss规则 ...
- 轻松学习Ionic (三) 安装sass并在webstorm中为scss添加watcher
1. 安装Ruby 最新为 2.1.5版本,不放心的话安装 Ruby 1.9.3-p551 安装过程中注意勾选上第二项!即将Ruby加入到可执行的环境变量中去. 安装结束后在命令行中 ...
- 在vue中引入scss
先npm安装stylus和stylus-loader (我安装后,报错提示缺少stylus,所以第一步安装stylus,如果没有提示可省略第一步) 1.到 package.json ----- de ...
- vue中使用scss
之前项目里我一般是使用less的,朋友问到如何引入scss,于是我就简单的跑了一下,以下主要供自己学习,如有更好的方法可以一起交流讨论一下 第一步,安装依赖 cnpm install node-sas ...
- sublime text 中 .vue文件中的scss语法无法高亮bug怎么解决
如题,在vuejs的单文件组件中,.vue 结尾的文件里面使用scss的时候,无法高亮.因为 sublime默认是不带sass语法高亮的,安装 sublime SCSS语法高亮包即可. 方法如下: ...
- 记录cacl()函数中使用scss变量不生效的问题
问题 使用cacl()动态计算元素的高度,运算中包含一个scss变量.如下: height: calc(100% - $ws-header-height); 在浏览器中发现并没有达到预期效果,scss ...
- 在vue中使用scss的配置
1.创建一个基于 webpack 模板的新项目 $ vue init webpack myvue 2.在当前目录下,安装依赖 $ cd myvue$ npm install 3.安装sass的依赖包 ...
随机推荐
- selenium3 文件系列之------读取properties文件
一个eclipse工程会有很多配置文件,有的配置文件是写在properties里,也有写在xml文件里的.这个总结一下是自动化测试是如何读取properties文件. 一.准备config.prope ...
- Linux之通配符实验
作业五:通配符实验 反引号与()在此时都是表死获取结果 但是一般使用()的方式,因为反引号在多个反引号的时候无法正确指代 获取当前bash 的变量 echo $变量名 echo $? 表示上一次命令的 ...
- Myeclispe 代码自动补全
1.Myeclispe—>Preference 2.Java->Editor->Content Assist 3.Auto activation for java 补全(.abcde ...
- flask之分页插件的使用、添加后保留原url搜索条件、单例模式
本篇导航: flask实现分页 添加后保留原url搜索条件 单例模式 一.flask实现分页 1.django项目中写过的分页组件 from urllib.parse import urlencode ...
- 咏南WEB APP开发框架
咏南WEB APP开发框架 咏南WEB桌面框架演示:47.106.93.126:9999 咏南WEB手机框架本地:47.106.93.126:8077 咏南CS框架下载:https://pan.bai ...
- SOFABolt 源码分析
SOFABolt 是一个轻量级.高性能.易用的远程通信框架,基于netty4.1,由蚂蚁金服开源. 本系列博客会分析 SOFABolt 的使用姿势,设计方案及详细的源码解析.后续还会分析 SOFABo ...
- UITextField 基本设置
_myAccount = [[UITextField alloc]init]; _myAccount.frame = CGRectMake(, , , ); _myAccount.background ...
- VTK使用矢量数据弯曲几何体
vtkWarpVector is a filter that modifies point coordinates by moving points along vector times the sc ...
- linux 安装nvm,通过nvm安装node
1,nvm git地址点击打开链接,安装命令 curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh ...
- 【python】Python的安装和配置
Python是一种计算机程序设计语言.是一种动态的.面向对象的脚本语言,最初被设计用于编写自动化脚本(shell),随着版本的不断更新和语言新功能的添加,越来越多被用于独立的.大型项目的开发. Pyt ...