无法让bootstrap-sass与webpack配合使用

Question

我正在按照bootstrap-sass-loader页面上的说明进行操作。

在我的package.json中，我有以下内容：

"bootstrap-sass": "^3.3.6",
"bootstrap-sass-loader": "^1.0.9"

这是我的 webpack.config.js 文件

module.exports = {
  entry: ['./app.js'],
  output: {
    publicPath: 'http://localhost:8080/',
    filename: 'build/bundle.js'
  },
  devtool: 'eval',
  module: {
    /* used on code before it's transformed */
    preLoaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        loader: 'source-map'
      }
    ],
    /* used to modify code */
    loaders: [

      {test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery'},
      {test: /\.obj|\.mtl|\.html|\.dae|\.txt/, loader: "raw"},
      {test: /\.jsx?$/, exclude: /(node_modules)/, loader: 'babel'},
      {test: /\.css$/, loader: 'style-loader!css-loader'},
      {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file"},
      {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream"},
      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml"},
      {
        test: /\.scss$/,
        /* order from bottom to top, so first sass, autoprefix, css and finally style */
        loaders: ['style', 'css', 'autoprefixer?browsers=last 3 versions', 'sass?outputStyle=expanded']
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: ['url?limit=8192', 'img']
      },
      {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        loader: 'babel'
      }
    ],
    /* used to modify generated code */
    postLoader: []
  }
};

我理解的是我只需要使用

require("bootstrap-sass-loader");

我在我的app.js中完成了代码，但我无法使用任何Bootstrap样式。我在这里缺少什么？

- MJB

Answer 1

虽然不是很直接，但可以不必使用json就能够实现。

首先，在你的main.js/ts中导入通过npm安装的bootstrap-sass。

require("bootstrap-sass");

或者如果您正在使用ts/ES6：

import "bootstrap-sass";

然后只需在组件的样式中导入这两个（在Angular 2中为内联或外部sass/scss文件）：

@import "~bootstrap-sass/assets/stylesheets/bootstrap-sprockets"
@import "../styles/bootstrap/bootstrap"

接下来，您需要拥有一个名为 ../styles/bootstrap 的文件夹，并包含以下内容：

• variables.scss：只需从 node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss 复制并自定义即可。
• bootstrap.scss：这是主要的 bootstrap 文件的 "webpack-ified" 版本：

//

  @import "variables"; //this is the key to easy customisation
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/mixins";
  @import "~bootstrap-sass/assets/stylesheets/~bootstrap-sass/assets/stylesheets/bootstrap/normalize";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/print";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/glyphicons";

  // Core CSS
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/scaffolding";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/type";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/code";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/grid";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/tables";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/forms";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/buttons";

  // Components
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/component-animations";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/dropdowns";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/button-groups";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/input-groups";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/navs";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/navbar";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/breadcrumbs";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/pagination";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/pager";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/labels";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/badges";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/jumbotron";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/thumbnails";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/alerts";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/progress-bars";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/media";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/list-group";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/panels";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/wells";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/close";

  // Components w/ JavaScript
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/modals";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/tooltip";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/popovers";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/carousel";

  // Utility classes
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/utilities";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities";

最后，Webpack 配置部分。这可能是加载器：

{
      test: /\.(sass|scss)$/,
      loader: "file?name=[path][name].css!sass-loader"
    }

这是一种加载jQuery的方法:

new webpack.ProvidePlugin({
  $: "jquery",
  jQuery: "jquery"
})

- cortopy

---

你说：“然后只需在你的sass/scss文件中导入这两个”。如何包含/导入“你的”sass/scss文件？ - Luke

抱歉，我意识到“your”并不是特别具有解释性。我已经编辑了我的回答。我指的是组件的样式。 - cortopy

我收到了十几个这样的错误信息：Error in ./~/bootstrap-sass/assets/javascripts/...，以及在/home...路径下的Module not found: 'jquery'。 - OlehZiniak

Answer 2

使用bootstrap-sass-loader花费了很长时间，但我从来不喜欢它。你最好直接编译它，并使用js文件覆盖boostrap变量或使用jsontosass-loader添加新变量。

确保jquery已正确加载

  resolve     : {
    alias         : {     
      // bind to modules;
      modules     : path.join(__dirname, "node_modules")
    }
  },
  plugins     : [
    new webpack.ProvidePlugin({
      "$"                   : "jquery",
      "jQuery"              : "jquery",
      "window.jQuery"       : "jquery"
    }),

在 webpack.config.js 中添加。

var sassGlobals = require('[YourVars.json file]');
var sassVars = JSON.stringify(sassGlobals);

添加到加载器

  { test: /\.scss$/, loaders: ["style", "css", "sass","jsontosass?" + sassVars]},
  { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
  { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
  { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
  { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
  { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },

在你的 app.scss 文件中，你需要进行以下导入操作。

@import "~bootstrap-sass/assets/stylesheets/_bootstrap-sprockets.scss";
@import "~bootstrap-sass/assets/stylesheets/_bootstrap.scss";

最后，在您的app.js中添加以下内容（modules被别名为node_modules）。

/**
 * initializes bootstrap
 */
require("modules/bootstrap-sass/assets/javascripts/bootstrap.js");
require("./app.scss");

- wendellmva