大家好,

我一直在玩Webpack的Bootstrap,但我已经到了把头发撕下来的地步.我已经浏览了大量的博客文章,他们要么使用了7个月前过时的"bootstrap webpack"插件(令人惊讶的是,它不能开箱即用),要么..它们包括通过导入"node_modules/*/Bootstrap/css/Bootstrap"的 bootstrap 文件.css'.

当然,必须有一种更干净、更有效的方法来解决这个问题?

这是我当前的webpack.config.js个文件:

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var autoprefixer = require('autoprefixer');
var path = require('path');

module.exports = {
    entry: {
        app: path.resolve(__dirname, 'src/js/main.js')
    },
    module: {
        loaders: [{
            test: /\.js[x]?$/,
            loaders: ['babel-loader?presets[]=es2015&presets[]=react'],
            exclude: /(node_modules|bower_components)/
        }, {
            test: /\.css$/,
            loaders: ['style', 'css']
        }, {
            test: /\.scss$/,
            loaders: ['style', 'css', 'postcss', 'sass']
        }, {
            test: /\.sass$/,
            loader: 'style!css!sass?sourceMap'
        },{
            test: /\.less$/,
            loaders: ['style', 'css', 'less']
        }, {
            test: /\.woff$/,
            loader: "url-loader?limit=10000&mimetype=application/font-woff&name=[path][name].[ext]"
        }, {
            test: /\.woff2$/,
            loader: "url-loader?limit=10000&mimetype=application/font-woff2&name=[path][name].[ext]"
        }, {
            test: /\.(eot|ttf|svg|gif|png)$/,
            loader: "file-loader"
        }]
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '/js/bundle.js',
        sourceMapFilename: '/js/bundle.map',
        publicPath: '/'
    },
    plugins: [
        new ExtractTextPlugin('style.css')
    ],
    postcss: [
        autoprefixer({
            browsers: ['last 2 versions']
        })
    ],
    resolve: {
        extensions: ['', '.js', '.sass'],
        modulesDirectories: ['src', 'node_modules']
    },
    devServer: {
        inline: true,
        contentBase: './dist'
    }
};

我可以 Select require('bootstrap')(通过某种方式让jQuery在其中工作),但是..我很好奇你们的 idea 和行为.

提前感谢:)

推荐答案

我不确定这是否是最好的方式,但下面的vue.js webapp对我来说效果很好.你可以看到工作代码here.

我已经将bootstrap所需的文件包括在index.html中,如下所示:

<head>
  <meta charset="utf-8">
  <title>Hey</title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <link rel="stylesheet" href="/static/bootstrap.css" type="text/css">

  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
  <script  href="/static/bootstrap.js"></script>
</head>

这是可行的,你可以执行回购协议.我之所以这样做是因为我必须在bootstrap中进行一些配置,所以我必须更改变量文件,并构建 bootstrap 代码,它输出我bootstrap.jsbootstrap.css个文件,我在这里使用.


有一种替代方法是使用npm软件包和网页包定制.

首先在项目中安装 bootstrap 程序:

npm install bootstrap@4.0.0-alpha.5

并确保您可以在组件中使用sass loader:

npm install sass-loader node-sass --save-dev

现在转到您的webpack配置文件,添加一个sassLoader对象,其中包含以下内容:

sassLoader: {
    includePaths: [
        path.resolve(projectRoot, 'node_modules/bootstrap/scss/'),
    ],
},

projectRoot应该指向你可以导航到node_packages的地方,在我的例子中是:path.resolve(__dirname, '../')

现在,您可以在应用程序中直接使用 bootstrap .添加以下内容时,vue文件和webpack将为您编译:

<style lang="scss">
  @import "bootstrap";
</style>

Vue.js相关问答推荐

Nuxt3 Build . put文件夹保持空,没有从.nuxt复制任何内容

在Nuxt项目中混合Scrolltrigger与Lenis

在移动版本中使用标准的 v-data-table

如何在vue js模板中添加foreach和for循环

有没有办法在 Quasar 中为明暗模式创建我自己的 colored颜色 ?

vue js如何将布尔值传到数据库

vue 3 中范围样式和深度样式的问题

使用 Vue.js 清除数组内容和react性问题

使用 jquery-chosen 插件更新 vuejs 模型值

如何在 vue.js 构建中重命名 index.html?

Bootstrap-vue b-table,标题中带有过滤器

带有子菜单的 Vuetify 导航抽屉

如何突出显示 Vuetify 菜单中的选定项目?

如何告诉 Vue-cli 我的应用程序的入口点在哪里?

Vue Js如何在单个文件模板中使用mixins?

emit更新数组不起作用

Vue.js 中的 CSS 框架

使用 puppeteer 生成 PDF 而不保存

使用 vuejs 设置响应式屏幕宽度

Vuex 模块Mutations