在react中使用scss_react react配置scss - CSDN
  • react项目中使用 Sass 或者 Less

    千次阅读 2019-06-06 21:02:38
    使用脚手架create-react-app 创建的 react项目,默认使用了webpack ==>> 请注意webpack的版本 2.create-react-app 创建的 react项目,webpack配置默认是隐藏的,如果需要查看或者修改,请使用npm run eject...

    注意:1. 使用脚手架 create-react-app 创建的 react项目,默认使用了webpack ==>> 请注意webpack的版本

               2. create-react-app 创建的 react项目,webpack配置默认是隐藏的,如果需要查看或者修改,请使用 npm run eject 命令,

               3. 如果webpack是4.x的版本,配置文件 webpack.config.js (一个文件),否则会有 webpack.config.dev.js 和 webpack.config.prod.js 两个文件

     

    一、使用 Sass  ==>> 简单

    首先,看一下webpack.config.js中对css的默认配置:

            create-react-app 创建的 react项目,默认就是支持Sass的,使用只需要安装一下  node-sass 这个包即可使用

            命令: npm install node-sass -D

    测试Sass:

    1)创建文件 src/test.scss  ==>> 后缀名:.scss

    $themeColor: #17B3A3;
    p{
      background: $themeColor;
      span{
        color: #0f0
      }
    }

    2)在App.js 中引入使用

    import React from 'react';
    import './test.scss'
    
    function App() {
      return (
        <div className="App">
          <header className="App-header">
            <p className='box'>
              React.
              <span>你好</span>
            </p>
          </header>
        </div>
      );
    }
    
    export default App;

    3)效果

     

    二、使用Less  ==>> 相对复杂

    1. 安装依赖包:cnpm i --save-dev less less-loader   (less 、less-loader两个包)

    2. 修改webpack配置  ==>> webpack版本4.x以上,才只用改webpack.config.js一个文件,否则需要改两个哦

            2.1 在 webpack.config.js 中 "style files regexes" (40行) 添加 less   ==》即照着Sass改一份Less的

            增加的代码如下:

    const lessRegex = /\.less$/;
    const lessModuleRegex = /\.module\.less$/;
    
    
    // 或者改成这样
    // const lessRegex = /\.(scss|less)$/;
    // const lessModuleRegex = /\.module\.(scss|less)$/;

            2.2 增加 Less 编译配置

            增加代码如下:==》即照着Sass改一份Less的

      //  ====================== 第二处 ==================
                {
                  test: lessRegex,
                  exclude: lessModuleRegex,
                  use: getStyleLoaders(
                    {
                      importLoaders: 2,
                      sourceMap: isEnvProduction && shouldUseSourceMap,
                    },
                    'less-loader'
                  ),
                  // Don't consider CSS imports dead code even if the
                  // containing package claims to have no side effects.
                  // Remove this when webpack adds a warning or an error for this.
                  // See https://github.com/webpack/webpack/issues/6571
                  sideEffects: true,
                },
                // Adds support for CSS Modules, but using SASS
                // using the extension .module.scss or .module.sass
                {
                  test: lessModuleRegex,
                  use: getStyleLoaders(
                    {
                      importLoaders: 2,
                      sourceMap: isEnvProduction && shouldUseSourceMap,
                      modules: true,
                      getLocalIdent: getCSSModuleLocalIdent,
                    },
                    'less-loader'
                  ),
                },

    这样,Less的配置就完成了

     

    测试Less:

     

    1)创建文件 src/test.less  ==>>  后缀名:.less

    @themeColor: #17B3A3;
    p{
      background: @themeColor;
      span{
        color: #fcc;
      }
    }

    2)在App.js 中引入使用

    import React from 'react';
    import './test.less'
    
    function App() {
      return (
        <div className="App">
          <header className="App-header">
            <p className='box'>
              React.
              <span>你好</span>
            </p>
          </header>
        </div>
      );
    }
    
    export default App;

    3)效果

     

    文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出!

    展开全文
  • react 项目中使用Sass

    千次阅读 2019-02-21 14:40:04
    使用react 脚手架新建了一个项目,想要引入 sass 。 本来是想用Less 的,但是 npm run eject (网上的说法要暴露配置文件),时,项目提示:Create React App 2 supports TypeScript, Sass, CSS Modules ....  ...

    使用react 脚手架新建了一个项目,想要引入 sass 。

    本来是想用Less 的,但是在 npm run eject (网上的说法要暴露配置文件),时,项目提示:Create React App 2 supports TypeScript, Sass, CSS Modules .... 

    于是,还是用Sass 好了。

    但是,Sass 也不是直接写代码用就好。还是需要下载 node-sass 插件的。脚手架只是添加了 sass-loader 的支持,所以,sass-loader 就不用管了。

    安装 node-sass

    yarn add node-sass

    试了一下,yarn add 真的比 npm install 要快不少...

    安装好了后,我们就可以编写一个sass 文件:

    test.scss 如下(放在src目录下)

    a {
    	color: red
    }
    p {
    	color: red
    }

    然后再在 App.js 中插入代码 (src目录下)

    import './test.scss';

    然后启动项目,就可以啦。

    展开全文
  • create-react-app版本:1.5.2   1、首先安装sass-loader node-sass npm install sass-loader node-sass —save-dev   2、运行npm run eject 这时候会生成配置文件   3、找到config文件里的webpack.config...

    create-react-app版本:1.5.2

     

    1、首先安装sass-loader node-sass

    npm install sass-loader node-sass —save-dev

     

    2、运行npm run eject

    这时候会生成配置文件

     

    3、找到config文件里的webpack.config.dev.js

    webpack.config.prod.js里的css配置也要修改,修改内容同webpack.config.dev.js

    找到module里的css配置部分,修改正则匹配为:/\.(css|scss)$/,在use数组里添加sass-loader

     

    4、npm run start

    在src目录创建一个test.scss,在app.js引入就可以用了。

    展开全文
  • 在Scss大火的今天无论时React 还是Vue 都会使用Scss来作为提高开发效率的一种手段 1.左右布局快速开发 布局左右布局是非常常见的一种模式,要使用一下方式快速布局首先要满足于两个条件,满足以上条件后可以...

    在Scss大火的今天无论时React 还是Vue 都会使用Scss来作为提高开发效率的一种手段

    1.左右布局快速开发

    在布局中左右布局是非常常见的一种模式,要使用一下方式快速布局首先要满足于两个条件,在满足以上条件后可以在子级使用 Padding 来任意调整位置

    1. 父级盒子的宽度必须要确定

    2. 子级宽度需要传入Px值或者百分比

    @mixin LAndRLayout($width, $height:auto){
      display:inline-block;
      width:$width;
      height: $height;
      box-sizing:border-box;
      vertical-align: middle;
    }
    

    2.块级文字居中前提是必须是块级

    @mixin AutoCenter($width:auto, $height:auto){
      width: $width;
      height:$height;
      line-height:$height;
    }
    

    3.文字超过n行进行省略

    @mixin overFlowNUm($num:2){
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      word-break: break-all;
      -webkit-line-clamp:$num;
      -webkit-box-orient:vertical;
    }
    

    4.文字超出进行省略

    @mixin overFlow{
      overflow:hidden; //超出的文本隐藏
      text-overflow:ellipsis; //溢出用省略号显示
      white-space:nowrap; //溢出不换行
    }
    

    5.禁止选择中文本的同时鼠标出现小手

    @mixin Mouse{
      user-select:none;
      cursor:pointer;
    }
    

    6.滚动条样式

    @mixin ScrollBar{
      ::-webkit-scrollbar {
        width:5px;
      }
      /* Track */
      ::-webkit-scrollbar-track {
        border-radius: 10px;
        width: 5px;
        height: 10px;
        background: rgba(175,189,223,0.2);
      }
      /* Handle */
      ::-webkit-scrollbar-thumb {
        -webkit-border-radius: 10px;
        border-radius: 10px;
        height: 10px;
        background: rgba(142, 143, 145, 0.8);
      }
      ::-webkit-scrollbar-thumb:window-inactive {
        background: rgba(169, 169, 169, 0.4);
      }
    }
    

    7.使用rem自适应

    $vw_fontsize: 192;
    @function rem($px) {
      @return ($px / $vw_fontsize) * 1rem;
    }
    //一种计算方式
    // 根元素大小使用 vw 单位
    $vw_design: 1920;
    html {
      font-size: ($vw_fontsize / $vw_design) * 100vw;//10vw
      // 同时,通过Media Queries 限制根元素最大最小值
      @media screen and (max-width: 980px) {
        font-size: 98px;
      }
    }
    
    // body 也增加最大最小宽度限制,避免默认100%宽度的 block 元素跟随 body 而过大过小
    $min_width: 1024px;
    body {
      // max-width: 1920px;
      min-width: $min_width;
    }
    
    @mixin inlineBlock($width,$height,$loc:center,$lneHgt:auto){
          width:$width;
          height:$height;
          display: inline-block;
          text-align: $loc;
          line-height: $height;
    }
    //块级盒子居中不会影响父元素,不兼容IE7及以下
    @mixin boxCenter{
        display: table;
        margin: 0 auto;
    }
    //块级盒子可以做到水平垂直多行文字居中,
      把当前属性设置给父元素在设置子元素设置 display: inline-block.
    @mixin boxHorAndVerCenter{
      display:table-cell;
      vertical-align:middle;
      text-align:center;
    }
    
    展开全文
  • react项目中使用sass样式

    千次阅读 2019-04-25 09:42:42
    本文主要介绍如何使用create-react-app创建的react项目中使用sass来编写样式文件。 本文github:https://github.com/hushaohhy/react-router-dom-demo/tree/future/1.0.1 1、展示全部文件 项目的根目录下,...
  • react Dva引入sass(scss)

    千次阅读 2020-06-22 09:44:23
    在React中使用CSS Modules设置样式 LESS roadhog原本就把less包进去,所以可以很自然地使用。原理其实就是扫描node-modules 的时候会包进去: ​ SASS 引入 不需要修改本地任何档案的配置 不需要新增任何指令 所以...
  • React 中使用scss

    2020-08-08 23:12:59
    首先导入node-sass npm i node-sass -D 编写样式文件header.scss, header.module.scss 两个样式文件一样,...React 中使用scss 导入样式文件import './styles/header.scss'import React from 'react' import from .
  • 在React中使用scss-loader前需要先安装node-sass。npm install node-sass -D 时有时候会安装到一半甚至最后报一个timeout的错误 很痛苦。如下: 解决方法是使用镜像 npm config set sass_binary_site ...
  • 然后index.js 导入: import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; //这是 create-react-app 的时候自动生成的 css import App from './App'; imp..
  • react配置全局scss变量

    2020-03-09 14:52:43
    create-react-app引入scss之后,就可以使用scss的基本功能了。但是,目前无法做到全局范围内引用scss的变量/extends/函数,目前要实现的就是,就是入口文件引入后,可以全局使用。 换句话说,如果你不想...
  • 自己搭建的react项目引入scss或css

    千次阅读 2019-12-26 14:54:15
    react、webpack、bebal7搭建项目参考我的上一篇博客 ...搭建完成react项目后,开发过程引入css或scss时出现报错,无法解析css或scss文件内容 解决方法如下: npm install --save-devcss-loaderstyl...
  • 最近我的react工程需要做留海屏幕适配,用了公司的框架mtl(支持友空间),我们都知道现在大多数做留海适配都是顶部设置25px的高度,那为什么做适配会用到scss全局变量呢? 答案就是方便!配置了全局变量后我们...
  • 使用create-react-app安装完项目之后。 执行npm install sass-loader node-sass --save-dev安装sass这两个相关的插件。 写一个scss文件 直接组件引入scss文件 将工程跑起来然后查看页面 好了愉快的写...
  • react配置scss的方法。

    千次阅读 2018-10-13 01:00:15
    1 先在react项目的配置。 创建项目后,要执行npm eject 也就是打开全部配置项。 安装依赖:yarn add sass-loader node-sass 或 npm install sass-loader node-sass 找到config里面的两个配置文档。 分别是 webpack...
  • React 项目环境下,要去实现样式的方式有三种方法,前两种没有办法实现真正的把样式表单独抽离出来; 如果把样式表抽离出来,因为样式表没有作用域,所以,把样式抽离出来,必须要启用模块化,通过参数 modules ...
  • react中使用scssby Max Goh 由Max Goh 我如何将CSS模块和SCSS集成到我的React应用程序中 (How I integrated CSS Modules with SCSS into my React application) I recently started on an Isomorphic React ...
  • react引用scss全局的变量 react scss-load 配置一个全局变量文件 需要一个sass-resources-loader 的插件 npm install sass-resources-loader --save-dev 下载太慢的话,也可以使用cnpm 修改config/webpack....
  • React-脚手架配置scss

    2019-01-07 16:03:45
    React-脚手架中使用scss的前提配置 1.创建脚手架之后,打开package.json文件,找到如下项。 划红线的区域的指令就是生成相关配置文件的命令;git中 npm run eject 运行之后会生成一个config文件夹,文件夹...
  • 01-React搭建react环境及SCSS的配置

    千次阅读 2018-10-13 00:20:04
    零、前言 关于React不做自我介绍了。...电脑与手机同一wifi下可以通过ip访问项目,实现手机电脑同时预览 npx create-react-app my-app cd my-app npm start 一、第一个React项目: 第一个默认启动项目.png...
  • 1. 配置sass需要按以下步骤进行:  一、安装sass-loader和node-sass依赖 ...React提供的脚手架create-react-app创建的工程文件不像vue那种暴露出webpack来的配置,所以你要去依赖包  node_mo...
1 2 3 4 5 ... 20
收藏数 6,686
精华内容 2,674
关键字:

在react中使用scss