堆栈内存溢出
  简体   繁体   English

为什么引导手风琴组件在我的反应项目中不起作用？

[英]Why bootstrap accordion component doesn't work in my react project?

 原文  2020-12-26 17:43:36  0   1    reactjs/ twitter-bootstrap/ webpack/ sass/ accordion

问题描述

I have a react project using webpack and babel.我有一个使用 webpack 和 babel 的反应项目。

webpack.config.js: webpack.config.js：


const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js',
  },
  devServer: {
    contentBase: './public',
    watchContentBase: true,
    watchOptions: {
      ignored: /node_modules/,
    },
    historyApiFallback: true,
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /.(sass|scss|css)$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

.babelrc: .babelrc：

{
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ], 
    "plugins": ["transform-class-properties"]
}

package.json: package.json：

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production",
    "start-lan": "webpack-dev-server --mode development --host 0.0.0.0"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.21.1",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "bootstrap": "^4.5.3",
    "react": "^17.0.1",
    "react-bootstrap": "^1.4.0",
    "react-dom": "^17.0.1",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.0.1",
    "redux-devtools-extension": "^2.13.8",
    "sass": "^1.30.0",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

inside root's folder I have a public folder with a html file:在根文件夹中，我有一个带有 html 文件的公共文件夹：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>project</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>

and a src folder with an index.js, an App.js and an App.scss:以及一个包含 index.js、App.js 和 App.scss 的 src 文件夹：

index.js: index.js：

import App from './App';

App.js:应用程序.js：

import React, { Component, Fragment } from 'react';
import ReactDOM from 'react-dom';

import './App.scss';
import React, { Component } from 'react'

class App extends Component {
  render() {
    return (
      <div>
        <h1>Hello, World!</h1>
        <button className="btn btn-primary">Click Me!</button>
      </div>
    )
  }
}

export default App;

ReactDOM.render(<App />, document.getElementById('root'))

App.scss:应用程序.scss：

@import "~bootstrap/scss/bootstrap";

h1 {
    color: green;
}

As you can see bootstrap loads as well as h1 green color from App.scss.如您所见，引导程序加载以及来自 App.scss 的 h1 绿色。 I am trying to create an accordion component and bootstrap classNames doesn't work.I think that I have implement bootstrap wrong.我正在尝试创建一个手风琴组件，但 bootstrap classNames 不起作用。我认为我实施 bootstrap 错误。 How should I add bootstrap with sass in my project and how can I make accordion bootstrap classNames work well?我应该如何在我的项目中添加带有 sass 的引导程序以及如何使手风琴引导程序类名正常工作？

1 个解决方案

解决方案1
 0  2020-12-28 13:47:18

I have a react project using webpack and babel.我有一个使用 webpack 和 babel 的反应项目。

webpack.config.js: webpack.config.js：


const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js',
  },
  devServer: {
    contentBase: './public',
    watchContentBase: true,
    watchOptions: {
      ignored: /node_modules/,
    },
    historyApiFallback: true,
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /.(sass|scss|css)$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

.babelrc: .babelrc：

{
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ], 
    "plugins": ["transform-class-properties"]
}

package.json: package.json：

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production",
    "start-lan": "webpack-dev-server --mode development --host 0.0.0.0"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.21.1",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "bootstrap": "^4.5.3",
    "react": "^17.0.1",
    "react-bootstrap": "^1.4.0",
    "react-dom": "^17.0.1",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.0.1",
    "redux-devtools-extension": "^2.13.8",
    "sass": "^1.30.0",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

inside root's folder I have a public folder with a html file:在根文件夹中，我有一个带有 html 文件的公共文件夹：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>project</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>

and a src folder with an index.js, an App.js and an App.scss:以及一个包含 index.js、App.js 和 App.scss 的 src 文件夹：

index.js: index.js：

import App from './App';

App.js:应用程序.js：

import React, { Component, Fragment } from 'react';
import ReactDOM from 'react-dom';

import './App.scss';
import React, { Component } from 'react'

class App extends Component {
  render() {
    return (
      <div>
        <h1>Hello, World!</h1>
        <button className="btn btn-primary">Click Me!</button>
      </div>
    )
  }
}

export default App;

ReactDOM.render(<App />, document.getElementById('root'))

App.scss:应用程序.scss：

@import "~bootstrap/scss/bootstrap";

h1 {
    color: green;
}

As you can see bootstrap loads as well as h1 green color from App.scss.如您所见，引导程序加载以及来自 App.scss 的 h1 绿色。 I am trying to create an accordion component and bootstrap classNames doesn't work.I think that I have implement bootstrap wrong.我正在尝试创建一个手风琴组件，但 bootstrap classNames 不起作用。我认为我实施 bootstrap 错误。 How should I add bootstrap with sass in my project and how can I make accordion bootstrap classNames work well?我应该如何在我的项目中添加带有 sass 的引导程序以及如何使手风琴引导程序类名正常工作？

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 为什么我的“Swiper”组件在 typescript 反应项目中不起作用？ - Why my "Swiper" component doesn't work in a typescript react project? 为什么 toFixed() 在我的 React 功能组件中不起作用？ - why doesn't toFixed() work in my React functional component? 我的React组件计时器不起作用 - My react component timer doesn't work 为什么我的React手风琴动画不会起作用？ - Why won't my React accordion animation work? 为什么 React 组件更新不起作用 - Why the React component update doesn't work 使用React进行Bootstrap：手风琴无法正常工作 - Bootstrap with React: accordion won't work React.js，为什么我的类组件不重新渲染元素，但是功能组件可以工作？ - React.js, why my class component doesn't rerender the element, but functional component can work? 为什么我在 React 中的 clearInterval 不起作用？ - Why my clearInterval in React doesn't work? 为什么我的 socket.io 事件侦听器在一个 UI 组件上正常工作，但在 React 中的另一个组件上不起作用？ - Why is my socket.io event listener works properly on a UI component but doesn't work on the other in React? 为什么onClick无法在自定义组件中起作用？ - Why doesn't onClick work on custom component in react?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM