javascript - bootstrap.css className 不影响网站的样式

问题描述

我正在尝试使用 bootstrap.css 来完成关于反应的教程，但由于某种原因，样式没有更新，我觉得这可能是我的 webpack.config 的问题，但我尝试了许多修复，但没有任何工作，在这里是我当前的配置：

const path = require('path')

module.exports = {
  devServer: {
    contentBase: path.resolve(__dirname, './public'),
    historyApiFallback: true,
  },
  entry: path.resolve(__dirname, './src/index.js'),
  resolve: {
    extensions: ['*', '.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          {
            loader: 'babel-loader',
          },
        ],
      },

      {
        test: /\.(scss)$/,
        use: [
          {
            loader: 'style-loader',
            loader: 'css-loader',
            loader: 'saas-loader',
            loader: 'postcss-loader',
            options: {
              plugins: function () {
                return [require('precss'), require('autoprefixer')]
              },
              modules: true,
            },
          },
        ],
      },
      {
        test: /\.(css)$/,
        use: [
          {
            loader: 'style-loader',
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
        ],
      },
    ],
  },
  output: {
    filename: 'bundle.js',
  },
}

还有我的 package.json

{
  "name": "trend-dot-com",
  "version": "1.0.0",
  "main": "index.js",
  "license": "TBA",
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/preset-env": "^7.10.2",
    "@babel/preset-react": "^7.10.1",
    "babel-loader": "^8.1.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.10.1",
    "@babel/plugin-syntax-class-properties": "^7.10.1",
    "bootstrap": "^4.5.0",
    "css-loader": "^3.5.3",
    "jquery": "^3.5.1",
    "postcss-loader": "^3.0.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.2.1"
  },
  "scripts": {
    "start": "webpack-dev-server --progress"
  }
}

最后是我的 js 代码

import React, {Component} from 'react'

class Counter extends Component {
  state = {
    count: 1,
  }

  render() {
    return (
      <div id="test">
        <span className="badge badge-primary m-2">{this.formatCount()}</span>
        <button className="">Increment</button>
      </div>
    )
  }

  formatCount() {
    const {count} = this.state
    return count === 0 ? 'Zero' : count
  }
}

export default Counter

我也确保在我的 index.js 中导入 bootstrap.css。任何帮助，将不胜感激。

编辑：这是我的 index.js

import React from 'react'
import ReactDOM from 'react-dom'
import {render} from 'react-dom'
import 'bootstrap/dist/css/bootstrap.min.css'
import App from './components/app.jsx'

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

标签： javascriptreactjsweb

javascript - bootstrap.css className 不影响网站的样式

问题描述

解决方案

推荐阅读