使用引導程序創建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'