小编Sta*_*cey的帖子

在 React 中导入引导 CSS 无法编译

我正在按照教程学习 React js,并使用我的终端通过 create-react-app 创建 React 应用程序。

将引导程序导入我的代码时出现问题,我无法弄清楚。我安装引导程序的方式是:

npm install bootstrap@4.1.3
Run Code Online (Sandbox Code Playgroud)


App.js 代码和导入 bootstrap :

import React, { Component } from 'react';

import './App.css';
import "bootstrap/dist/css/bootstrap.min.css"


class App extends Component {
  render() {
    return (
      <div className="App">
        <h1 className="alert alert-warning">Welcome</h1>
      </div>
    );
  }
}

export default App;
Run Code Online (Sandbox Code Playgroud)

编译时出现错误:

编译失败。

./node_modules/bootstrap/dist/css/bootstrap.css (./node_modules/css-loader??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./node_modules/bootstrap/dist/css/bootstrap.css)
Module not found: Can't resolve 'C:\Users\MyPc\Desktop\ReactAgile\reactxxx\node_modules\react-scripts\node_modules\babel-loader\lib\index.js' in 'C:\Users\MyPc\Desktop\ReactAgile\reactxxx'
Run Code Online (Sandbox Code Playgroud)

我尝试的是:安装不同版本的引导程序并将它们导入到我的 App.js 文件中,但发生了同样的错误。

reactjs

2
推荐指数
1
解决办法
5334
查看次数

Vueutify Navigation Drawer - 更改背景图像

嗨,我正在学习 vuetify,我想更改从 vuetify 默认布局模板导入的导航抽屉的背景。

模板是在官方 vuetify 文档中找到并导入的。


问题是我无法更改抽屉的背景并将其设置为图像

这是带抽屉的默认布局

<template>
  <v-app
    id="inspire"
    dark
  >
    <v-navigation-drawer
      v-model="drawer"
      fixed
      clipped
      app
    >
      <v-list dense>
        <v-list-tile v-for="item in items" :key="item.text" @click="">
          <v-list-tile-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>
              {{ item.text }}
            </v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-subheader class="mt-3 grey--text text--darken-1">SUBSCRIPTIONS</v-subheader>
        <v-list>
          <v-list-tile v-for="item in items2" :key="item.text" avatar @click="">
            <v-list-tile-avatar>
              <img :src="`https://randomuser.me/api/portraits/men/${item.picture}.jpg`" alt="">
            </v-list-tile-avatar>
            <v-list-tile-title v-text="item.text"></v-list-tile-title>
          </v-list-tile>
        </v-list>
        <v-list-tile class="mt-3" @click="">
          <v-list-tile-action>
            <v-icon color="grey darken-1">add_circle_outline</v-icon>
          </v-list-tile-action>
          <v-list-tile-title class="grey--text text--darken-1">Browse Channels</v-list-tile-title>
        </v-list-tile>
        <v-list-tile @click="">
          <v-list-tile-action>
            <v-icon color="grey …
Run Code Online (Sandbox Code Playgroud)

vue.js vuetify.js

1
推荐指数
1
解决办法
2327
查看次数

标签 统计

reactjs ×1

vue.js ×1

vuetify.js ×1