在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:这个问题当时我找了好久

 
1.png

这个是umi自己默认加上,我们并不想要这个东西,在.umirc.js文件中添加配置

...
cssLoaderOptions:{
localIdentName:'[local]'
}
...

  

 

umi中使用scss的更多相关文章

  1. 在项目中使用 SCSS

    背景概述 1. CSS预处理器 css预处理器定义了一种新的编程语言,编译后成正常的CSS文件.为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代 ...

  2. Vue笔记:在项目中使用 SCSS

    背景概述 1. CSS预处理器 css预处理器定义了一种新的编程语言,编译后成正常的CSS文件.为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代 ...

  3. 在vue项目中使用scss

    1.首先安装依赖 npm install node-sass sass-loader --save-dev 2.找到build中webpack.base.conf.js,在rules中添加scss规则 ...

  4. 轻松学习Ionic (三) 安装sass并在webstorm中为scss添加watcher

    1. 安装Ruby 最新为 2.1.5版本,不放心的话安装 Ruby 1.9.3-p551    安装过程中注意勾选上第二项!即将Ruby加入到可执行的环境变量中去.       安装结束后在命令行中 ...

  5. 在vue中引入scss

    先npm安装stylus和stylus-loader  (我安装后,报错提示缺少stylus,所以第一步安装stylus,如果没有提示可省略第一步) 1.到 package.json ----- de ...

  6. vue中使用scss

    之前项目里我一般是使用less的,朋友问到如何引入scss,于是我就简单的跑了一下,以下主要供自己学习,如有更好的方法可以一起交流讨论一下 第一步,安装依赖 cnpm install node-sas ...

  7. sublime text 中 .vue文件中的scss语法无法高亮bug怎么解决

    如题,在vuejs的单文件组件中,.vue 结尾的文件里面使用scss的时候,无法高亮.因为 sublime默认是不带sass语法高亮的,安装 sublime SCSS语法高亮包即可. 方法如下:   ...

  8. 记录cacl()函数中使用scss变量不生效的问题

    问题 使用cacl()动态计算元素的高度,运算中包含一个scss变量.如下: height: calc(100% - $ws-header-height); 在浏览器中发现并没有达到预期效果,scss ...

  9. 在vue中使用scss的配置

    1.创建一个基于 webpack 模板的新项目 $ vue init webpack myvue 2.在当前目录下,安装依赖 $ cd myvue$ npm install 3.安装sass的依赖包 ...

随机推荐

  1. selenium3 文件系列之------读取properties文件

    一个eclipse工程会有很多配置文件,有的配置文件是写在properties里,也有写在xml文件里的.这个总结一下是自动化测试是如何读取properties文件. 一.准备config.prope ...

  2. Linux之通配符实验

    作业五:通配符实验 反引号与()在此时都是表死获取结果 但是一般使用()的方式,因为反引号在多个反引号的时候无法正确指代 获取当前bash 的变量 echo $变量名 echo $? 表示上一次命令的 ...

  3. Myeclispe 代码自动补全

    1.Myeclispe—>Preference 2.Java->Editor->Content Assist 3.Auto activation for java 补全(.abcde ...

  4. flask之分页插件的使用、添加后保留原url搜索条件、单例模式

    本篇导航: flask实现分页 添加后保留原url搜索条件 单例模式 一.flask实现分页 1.django项目中写过的分页组件 from urllib.parse import urlencode ...

  5. 咏南WEB APP开发框架

    咏南WEB APP开发框架 咏南WEB桌面框架演示:47.106.93.126:9999 咏南WEB手机框架本地:47.106.93.126:8077 咏南CS框架下载:https://pan.bai ...

  6. SOFABolt 源码分析

    SOFABolt 是一个轻量级.高性能.易用的远程通信框架,基于netty4.1,由蚂蚁金服开源. 本系列博客会分析 SOFABolt 的使用姿势,设计方案及详细的源码解析.后续还会分析 SOFABo ...

  7. UITextField 基本设置

    _myAccount = [[UITextField alloc]init]; _myAccount.frame = CGRectMake(, , , ); _myAccount.background ...

  8. VTK使用矢量数据弯曲几何体

    vtkWarpVector is a filter that modifies point coordinates by moving points along vector times the sc ...

  9. linux 安装nvm,通过nvm安装node

    1,nvm git地址点击打开链接,安装命令 curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh ...

  10. 【python】Python的安装和配置

    Python是一种计算机程序设计语言.是一种动态的.面向对象的脚本语言,最初被设计用于编写自动化脚本(shell),随着版本的不断更新和语言新功能的添加,越来越多被用于独立的.大型项目的开发. Pyt ...