zoukankan      html  css  js  c++  java
  • 在create-react-app创建的React项目应用中配置JQ、Sass

    使用 create-react-app 配置 react 开发环境,像下面这样,就可以构建一个新的 react 单页面应用,非常方便。

    npm install -g create-react-app
    create-react-app my-app
    
    cd my-app
    npm start

    但是, 去掉了默认支持Sass等预处理器,和默认的JQ库。

    添加JQ库

    1.安装jq库 npm install --save-dev jquery

    2.在入口js 文件中引入 import $ from 'jquery';

    添加sass处理文件

    1.首先安装依赖:npm install sass-loader node-sass --save-dev

    2.找到node_modules/react-scripts/config/webpack.config.dev.js文件和webpack.config.prod.js文件(两个文件都要改)

    module配置项的最后一项配置改成如下

    { loader: require.resolve('file-loader'),

    loaders. exclude: [/.js$/, /.html$/, /.json$/,/.scss$/],

    options: { name: 'static/media/[name].[hash:8].[ext]',

    },

    },

    { test: /.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader'], }

    3.在入口js 文件中引入:import './test.scss';

    4.在package.json中srcipt 引入:build-css ,watch-css

    "scripts": {
    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
    },
  • 相关阅读:
    vue过滤器filters
    vue指令
    java命令
    mysql的information_schema表
    es6 Object的keys values entries方法
    mysql information_schema.INNODB_TRX
    流动相似性例子
    【转】time 模块详解(时间获取和转换)
    查找——平衡二叉树的实现(代码超详细注释)
    py中变量名的“秘密”
  • 原文地址:https://www.cnblogs.com/hfxm/p/8474415.html
Copyright © 2011-2022 走看看