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"
    },
  • 相关阅读:
    zoj 3599 Game 博弈论
    hdu 2486/2580 / poj 3922 A simple stone game 博弈论
    hdu 1517 A Multiplication Game 博弈论
    hdu 4407 Sum 容斥原理
    hdu 4686 Arc of Dream
    hdu 4588 Count The Carries
    hdu 4586 Play the Dice
    C#学习(5)
    C#学习(4)
    C#学习(3)
  • 原文地址:https://www.cnblogs.com/hfxm/p/8474415.html
Copyright © 2011-2022 走看看