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"
    },
  • 相关阅读:
    37 什么时候使用内部临时表
    2 Hadoop集群安装部署准备
    36 为什么临时表可以重名
    maven内置属性
    ProGuard 最全混淆规则说明
    stylus的用法
    vscode 插件 配置
    关于overflow:hidden
    vue-devtools/安装vue-devtools
    对Java中使用两个大括号进行初始化的理解
  • 原文地址:https://www.cnblogs.com/hfxm/p/8474415.html
Copyright © 2011-2022 走看看