首页 文章

Angular2 webpack:如何导入bootstrap css

提问于
浏览
6

我正在使用angular2-webpack-starter构建我的项目,我也想使用bootstrap .

我将ng2-bootstrap安装为 npm install ng2-bootstrap --save . 由于 ng2-bootstrap 只有一些指令,它需要引导程序的"real" .css 文件来设置它(但它的作者似乎假设我们已经有了它),所以我安装bootstrap为 npm install bootstrap --save .

现在,我的问题是如何将"real" bootstrap .css 文件导入到我的项目中,以便 ng2-bootstrap 可以使用它 .

我试过几种方法:

  • bootstrap.min.css 文件从 node_modules/bootstrap/dist/css 文件夹复制到我的 src/assets/css 文件夹,并将 <link href="assets/css/bootstrap.min.css" rel="stylesheet"> 添加到我的 index.html . 这种方式有效,但我担心 bootstrap.min.css 文件将不再由 npm 管理 . 我将来必须手动更新它 .

  • 另一次尝试需要我的 app.component.ts 之类的

styles:[require(' . / app.style.css'),require('../../ node_modules / bootstrap / dist / css / bootstrap.min.css')],

但它无法解决 .

  • 最后一次尝试将 import 'bootstrap'; 添加到 vendor.browser.ts 就像 import '@angular/core'; 一样 . 但它也失败了 . 似乎 bootstrap 不是像_2886520这样的包,我可以轻松导入它 .

所以,我的问题归结为如何在webpack中导入/加载 bootstrap ,以便它可以被我的项目中的 ng2-bootstrap 和其他组件使用,也可以使用npm进行升级 .

5 回答

  • 0

    你需要使用 css-loader 下载 css-loader 使用,我在我的角度2做了一些测试,它工作你需要一些装载机

    npm install css-loader style-loader url-loader file-loader  --save-dev
    

    然后在你的webpack.config中你可以像这样使用loader

    loaders: [
        {test: /\.css$/, loader:   ['style-loader', 'css-loader']},
        {test: /\.woff(\?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" },
        {test: /\.html$/, loader: 'raw',exclude: /node_modules/},
        {test   : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,loader : 'file-loader'},
    ]
    

    你可以加载你将要使用它的bootstrap文件,你可以在你的类中使用bootstrap

    import "bootstrap/dist/css/bootstrap.css";
        @Component({
            selector: "sg-nav",
            template: `
                        <div class="container"></div>`,
        })
        export class NavComponent {
            public name: string = "MR.Js";
        }
    

    here you can read how it works with css loader

    working example with bootstrap

  • 0

    import 'bootstrap'; 会引用Bootstrap的JS入口点,而不是它的CSS . 尝试使用3号

    import 'bootstrap/assets/css/bootstrap.min.css';
    

    代替 .

  • 5

    也许你可以这样试试

    import 'bootstrap';
    import '!style-loader!css-loader!bootstrap/assets/css/bootstrap.min.css';
    

    第一个'import'将导入'bootstrap'模块(可能引用bootstrap.js);

    第二个可能导入CSS .

    在你的webpack.config.js中你可以使用loader

  • 0

    您可以通过Webpack进行设置,但这需要在webpack.config.js(css-loaders,样式加载器,url-loaders,文件加载器)中安装和添加加载器,然后导入bootstrap.min.css文件和vendor.ts中的bootstrap文件 .

    我觉得这很冗长 . 而不是上面的,你可以简单地安装(例如使用npm)并将脚本下面的一行(缩小的webpack js文件)添加到index.html

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    
  • 0

    可能有更好的方法,但我正在使用 bower 来处理我的ng2项目中与css相关的库(例如bootstrap,font-awesome) .

    设置.bowerrc将文件保存到: src/assets/lib (例如)像这样:

    {
        "directory": "src/assets/lib",
    }
    

    然后用npm安装凉亭 .

    npm install bower --save-dev

    然后你可以安装bootstrap:

    bower install bootstrap --save 添加(如果您想将版本号固定)到您的bower.json文件 .

    这个解决方案的好处是,bower为您处理所有依赖项(例如,它会自动将jquery添加到您的lib目录)

    然后,您可以手动添加 index.html 中的链接,如您所做的那样: <link rel="stylesheet" href="./assets/lib/bootstrap/dist/css/bootstrap.min.css"/>

    我将 src/assets/lib 文件夹添加到我的 .gitignore ...并且为了安装/部署,我运行 bower install .

相关问题