[英]Cannot get bootstrap-sass to work with webpack
Im following the instrtuctions on the bootstrap-sass-loader page 我遵循bootstrap-sass-loader页面上的instrtuctions
in my package.json I got 在我的package.json我得到了
"bootstrap-sass": "^3.3.6",
"bootstrap-sass-loader": "^1.0.9"
this is my webpack.config.js 这是我的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: []
}
};
as far as I understand I just have to use 据我所知,我只需要使用
require("bootstrap-sass-loader");
in my app.js
and be done. 在我的
app.js
中完成。 but I cannot use any bootstrap styles. 但我不能使用任何bootstrap样式。 what am I missing here?
我在这里想念的是什么?
It's not straightforward but it can work without having to do json. 这不是直截了当的,但它可以工作,而不必做json。
Start by importing boostrap-sass (installed via npm) in your main.js/ts 首先在main.js / ts中导入boostrap-sass(通过npm安装)
require("bootstrap-sass");
Or if you're using ts/ES6: 或者,如果您使用的是ts / ES6:
import "bootstrap-sass";
Then just import these two in the component's styles (inline or external sass/scss file in Angular 2): 然后只需在组件的样式中导入这两个样式(Angular 2中的内联或外部sass / scss文件):
@import "~bootstrap-sass/assets/stylesheets/bootstrap-sprockets"
@import "../styles/bootstrap/bootstrap"
You then need to have a folder ../styles/bootstrap with the following contents: 然后,您需要有一个文件夹../styles/bootstrap,其中包含以下内容:
// //
@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";
Finally, the webpack config bit. 最后,webpack配置位。 This could be the loader:
这可能是装载机:
{
test: /\.(sass|scss)$/,
loader: "file?name=[path][name].css!sass-loader"
}
And this a way to load jquery: 这是一种加载jquery的方法:
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
It took forever to get bootstrap-sass-loader to work but I never liked it. 让bootstrap-sass-loader工作已经花了很长时间,但我从来都不喜欢它。 You are much better off compiling it directly and use a js file to override boostrap variables or add new ones with jsontosass-loader .
你最好直接编译它并使用js文件覆盖boostrap变量或使用jsontosass-loader添加新变量。
make sure that jquery is properly loaded 确保正确加载jquery
resolve : {
alias : {
// bind to modules;
modules : path.join(__dirname, "node_modules")
}
},
plugins : [
new webpack.ProvidePlugin({
"$" : "jquery",
"jQuery" : "jquery",
"window.jQuery" : "jquery"
}),
add in the webpack.config.js 添加webpack.config.js
var sassGlobals = require('[YourVars.json file]');
var sassVars = JSON.stringify(sassGlobals);
add to the loaders 添加到装载机
{ 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" },
in your app.scss you do the following imports 在您的app.scss中,您执行以下导入
@import "~bootstrap-sass/assets/stylesheets/_bootstrap-sprockets.scss";
@import "~bootstrap-sass/assets/stylesheets/_bootstrap.scss";
and finally in your app.js you add the following (modules is aliased to node_modules). 最后在你的app.js中添加以下内容(模块别名为node_modules)。
/**
* initializes bootstrap
*/
require("modules/bootstrap-sass/assets/javascripts/bootstrap.js");
require("./app.scss");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.