Question

我真的很难在我的反应项目中获得自定义bootstrap.min.css有没有人知道如何做到这一点因为没有太多关于如何做到这一点的文档或者我可能只是盲目且无法看到它

谢谢

编辑：香港专业教育学院在我的index.html头部试过，但它不起作用

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/client.js",
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-class-properties', 
                    'transform-decorators-legacy'],
        }
      }
    ]
  },
  output: {
    path: __dirname + "/src/",
    filename: "client.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false 
           }),
  ],
};

那是我的webpack

我不确定最好的css加载器是什么，如果有人可以建议一个很棒的

编辑2

<div className="container" style={backImg}>
                <div className="row" style={slidePadding}>
                    <div className="col-md-12 well well-lg">
                        <div className="row">
                            <div className="col-md-12">
                                <h4>Thinking load from £200 to £3,000? Thinking of repaying from 6 - 24 months? </h4><br />
                                <Horizontal />
                            </div>
                        </div>
                        <div className="row">
                            <div className="col-md-12">
                                <p>&nbsp;</p>
                            </div>
                        </div>
                        <div className="row">
                            <div  className="col-md-12">
                                <p>Representative Example. Borrow £1,250 - 15 monthly repayments of £166.66. Total cost of credit £1,249.90 which is £1,249.90 interest at 122.96% pa fixed. Total amount repayable £2,499.90. Representative 233.6% APR.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

这是您登陆的网站的主要部分

这基本上是我希望css能够工作的地方我希望能够改变所有宽度和所有内容所以这样做内联样式会很可怕所以css文件是唯一的方法

Answer 1

您必须在组件（JS）文件中导入文件路径。例如：

import a from "../styles/bootstap.min.css";

Answer 2

自己做了我需要做的是在我的index.html中添加

-p

然后安装

<link href="./js/styles/bootstrap.min.css" rel="stylesheet">

然后在webpack.config.js中添加

npm install --save-dev ignore-loader

ignore-loader部分，它告诉babel不要转换css文件

Answer 3

您只需在应用的根目录中导入css文件即可。看看应用程序的根目录，然后在那里导入文件。喜欢： import＆＃39; ../ pathToTheFile＆＃39 ;; 就是这样。

如何将自定义css导入reactjs项目

3 个答案: