使用引导程序创建React应用程序css

Question

我正在使用创建React应用程序并希望将引导程序css添加到我的项目中。我看到了在create-react-app github上包含React Bootstrap的说明，但我只是寻找常规bootstrap，而不是React Bootstrap。

我已经安装了通过NPM引导和我，包括它在我的index.js的文件里面，像这样

import 'bootstrap/dist/css/bootstrap.css' 

这似乎当我运行启动脚本以部分工作。字体似乎使用引导，但就是这样，即没有其他Bootstrap CSS似乎工作。

我tryng建立

Module not found: Error: Cannot resolve module '[object Object]' in /Users/username/Sites/Learning/modular 
/src 

我猜这与字体做时，你得到下面的错误。我在修改webpack配置以允许引导字体方面遇到了一些困难。

有没有人能够做到这一点？

我使用的差不多相同的webpack配置create-react-app附带。然而，我确实修改了CSS加载器，以便它可以加载SASS并具有SASS/CSS模块的功能。我已经测试过，只需要不使用CSS模块的整个样式表仍然可行。

var autoprefixer = require("autoprefixer"); 
var webpack = require("webpack"); 
var HtmlWebpackPlugin = require("html-webpack-plugin"); 
var CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin"); 
var InterpolateHtmlPlugin = require("react-dev-utils/InterpolateHtmlPlugin"); 
var WatchMissingNodeModulesPlugin = require(
    "react-dev-utils/WatchMissingNodeModulesPlugin" 
); 
var getClientEnvironment = require("./env"); 
var paths = require("./paths"); 

// Webpack uses `publicPath` to determine where the app is being served from. 
// In development, we always serve from the root. This makes config easier. 
var publicPath = "/"; 
// `publicUrl` is just like `publicPath`, but we will provide it to our app 
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript. 
// Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz. 
var publicUrl = ""; 
// Get environment variables to inject into our app. 
var env = getClientEnvironment(publicUrl); 

// This is the development configuration. 
// It is focused on developer experience and fast rebuilds. 
// The production configuration is different and lives in a separate file. 
module.exports = { 
    // You may want 'eval' instead if you prefer to see the compiled output in DevTools. 
    // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343. 
    devtool: "cheap-module-source-map", 
    // These are the "entry points" to our application. 
    // This means they will be the "root" imports that are included in JS bundle. 
    // The first two entry points enable "hot" CSS and auto-refreshes for JS. 
    entry: [ 
    // Include an alternative client for WebpackDevServer. A client's job is to 
    // connect to WebpackDevServer by a socket and get notified about changes. 
    // When you save a file, the client will either apply hot updates (in case 
    // of CSS changes), or refresh the page (in case of JS changes). When you 
    // make a syntax error, this client will display a syntax error overlay. 
    // Note: instead of the default WebpackDevServer client, we use a custom one 
    // to bring better experience for Create React App users. You can replace 
    // the line below with these two lines if you prefer the stock client: 
    // require.resolve('webpack-dev-server/client') + '?/', 
    // require.resolve('webpack/hot/dev-server'), 
    require.resolve("react-dev-utils/webpackHotDevClient"), 
    // We ship a few polyfills by default: 
    require.resolve("./polyfills"), 
    // Finally, this is your app's code: 
    paths.appIndexJs 
    // We include the app code last so that if there is a runtime error during 
    // initialization, it doesn't blow up the WebpackDevServer client, and 
    // changing JS code would still trigger a refresh. 
    ], 
    output: { 
    // Next line is not used in dev but WebpackDevServer crashes without it: 
    path: paths.appBuild, 
    // Add /* filename */ comments to generated require()s in the output. 
    pathinfo: true, 
    // This does not produce a real file. It's just the virtual path that is 
    // served by WebpackDevServer in development. This is the JS bundle 
    // containing code from all our entry points, and the Webpack runtime. 
    filename: "static/js/bundle.js", 
    // This is the URL that app is served from. We use "/" in development. 
    publicPath: publicPath 
    }, 
    resolve: { 
    // This allows you to set a fallback for where Webpack should look for modules. 
    // We read `NODE_PATH` environment variable in `paths.js` and pass paths here. 
    // We use `fallback` instead of `root` because we want `node_modules` to "win" 
    // if there any conflicts. This matches Node resolution mechanism. 
    // https://github.com/facebookincubator/create-react-app/issues/253 
    fallback: paths.nodePaths, 
    // These are the reasonable defaults supported by the Node ecosystem. 
    // We also include JSX as a common component filename extension to support 
    // some tools, although we do not recommend using it, see: 
    // https://github.com/facebookincubator/create-react-app/issues/290 
    extensions: [".js", ".json", ".jsx", ""], 
    alias: { 
     // Support React Native Web 
     // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ 
     "react-native": "react-native-web" 
    } 
    }, 

    module: { 
    // First, run the linter. 
    // It's important to do this before Babel processes the JS. 
    preLoaders: [ 
     { 
     test: /\.(js|jsx)$/, 
     loader: "eslint", 
     include: paths.appSrc 
     } 
    ], 
    loaders: [ 
     // ** ADDING/UPDATING LOADERS ** 
     // The "url" loader handles all assets unless explicitly excluded. 
     // The `exclude` list *must* be updated with every change to loader extensions. 
     // When adding a new loader, you must add its `test` 
     // as a new entry in the `exclude` list for "url" loader. 

     // "url" loader embeds assets smaller than specified size as data URLs to avoid requests. 
     // Otherwise, it acts like the "file" loader. 
     { 
     exclude: [/\.html$/, /\.(js|jsx)$/, /\.css$/, /\.json$/, /\.svg$/], 
     loader: "url", 
     query: { 
      limit: 10000, 
      name: "static/media/[name].[hash:8].[ext]" 
     } 
     }, 
     // Process JS with Babel. 
     { 
     test: /\.(js|jsx)$/, 
     include: paths.appSrc, 
     loader: "babel", 
     query: { 
      // This is a feature of `babel-loader` for webpack (not Babel itself). 
      // It enables caching results in ./node_modules/.cache/babel-loader/ 
      // directory for faster rebuilds. 
      cacheDirectory: true 
     } 
     }, 
     // "postcss" loader applies autoprefixer to our CSS. 
     // "css" loader resolves paths in CSS and adds assets as dependencies. 
     // "style" loader turns CSS into JS modules that inject <style> tags. 
     // In production, we use a plugin to extract that CSS to a file, but 
     // in development "style" loader enables hot editing of CSS. 
     { 
     test: /\.css$/, 
     loaders: [ 
      "style?sourceMap", 
      "css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]", 
      "resolve-url", 
      "sass?sourceMap" 
     ] 
     }, 
     // JSON is not enabled by default in Webpack but both Node and Browserify 
     // allow it implicitly so we also enable it. 
     { 
     test: /\.json$/, 
     loader: "json" 
     }, 
     // "file" loader for svg 
     // { 
     // test: /\.svg$/, 
     // loader: "file", 
     // query: { 
     //  name: "static/media/[name].[hash:8].[ext]" 
     // } 
     // }, 
     { 
     test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/, 
     loader: "url" 
     }, 
     { 
     test: /\.(eot|ttf|wav|mp3)$/, 
     loader: "file" 
     } 

     // ** STOP ** Are you adding a new loader? 
     // Remember to add the new extension(s) to the "url" loader exclusion list. 
    ] 
    }, 

    // We use PostCSS for autoprefixing only. 
    postcss: function() { 
    return [ 
     autoprefixer({ 
     browsers: [ 
      ">1%", 
      "last 4 versions", 
      "Firefox ESR", 
      "not ie < 9" // React doesn't support IE8 anyway 
     ] 
     }) 
    ]; 
    }, 
    plugins: [ 
    // Makes some environment variables available in index.html. 
    // The public URL is available as %PUBLIC_URL% in index.html, e.g.: 
    // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> 
    // In development, this will be an empty string. 
    new InterpolateHtmlPlugin(env.raw), 
    // Generates an `index.html` file with the <script> injected. 
    new HtmlWebpackPlugin({ 
     inject: true, 
     template: paths.appHtml 
    }), 
    // Makes some environment variables available to the JS code, for example: 
    // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`. 
    new webpack.DefinePlugin(env.stringified), 
    // This is necessary to emit hot updates (currently CSS only): 
    new webpack.HotModuleReplacementPlugin(), 
    // Watcher doesn't work well if you mistype casing in a path so we use 
    // a plugin that prints an error when you attempt to do this. 
    // See https://github.com/facebookincubator/create-react-app/issues/240 
    new CaseSensitivePathsPlugin(), 
    // If you require a missing module and then `npm install` it, you still have 
    // to restart the development server for Webpack to discover it. This plugin 
    // makes the discovery automatic so you don't have to restart. 
    // See https://github.com/facebookincubator/create-react-app/issues/186 
    new WatchMissingNodeModulesPlugin(paths.appNodeModules) 
    ], 
    // Some libraries import Node modules but don't use them in the browser. 
    // Tell Webpack to provide empty mocks for them so importing them works. 
    node: { 
    fs: "empty", 
    net: "empty", 
    tls: "empty" 
    } 
}; 

我目前的想法是，这与Bootstrap使用的字体文件有关。该配置似乎没有处理ttf，woff，woff2或svg文件。 （svg的似乎被放置到一个静态文件夹，这可能会弄乱路径？）

Answer 1

我想通了。 create-react-app可以要求并在开箱即用的JavaScript内使用bootstrap。

我的问题是我还添加了CSS模块。 Webpack试图使用CSS模块加载引导程序，并且由于需要字体，可能会出现问题。要求其他全球CSS不会产生这个问题。

我通过添加规则，我的WebPack配置在.global.css结束CSS文件名，解决了这一问题，并改变了对CSS模块忽略与.global.css结尾的文件名中的任何CSS规则。

我复制了Bootstrap CSS和字体文件，并将它们放到我的项目目录中的assets文件夹中。我将bootstrap.min.css重命名为bootstrap.min.global.css。我需要从资产文件夹。

这是我发现的将CSS模块与全局CSS在webpack中混合使用的最佳解决方案。

Answer 2

您必须使用相对Webpack导入NPM模块。 ~

import '~bootstrap/dist/css/bootstrap.css'