Bootstrap-Vue CSS 编译在 Laravel Mix

Question

我正在使用 Laravel 5.6、Laravel Mix 2.0 和 Bootstrap-Vue 2.0.0-rc.1。

试图找到一种方法来配置 Laravel Mix 以将 Bootstrap-Vue 的 CSS 包含到我的 app.css 文件中并防止 Bootstrap-Vue 从在页面 <head>.

中包含 <style> 个标签

我在包文档中看到了这条注释，但仍然不确定如何正确使用它：

Note: requires webpack configuration to load css files (official guide)

Answer 1

安装：

npm i bootstrap-vue
npm 安装--save-dev style-loader css-loader

使用：

将 resources/js/app.js 编辑为：

从 'vue'
从 'bootstrap-vue'
Vue.use(BootstrapVue)

将 resources/sass/app.scss 编辑为：

导入样式：
- 导入'~bootstrap/dist/css/bootstrap.css'
- 导入'~bootstrap-vue/dist/bootstrap-vue.css'

确保 app.js 和 app.css 包含在充当 vue 容器的 blade(view) 中。参见：https://bootstrap-vue.js.org/docs/

Answer 2

终于找到了解决方案 - ExtractTextPlugin。

let mix = require('laravel-mix');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

mix.js('resources/assets/js/app.js', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css');

mix.webpackConfig({
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      }
    ]
  }
});

参考：https://github.com/JeffreyWay/laravel-mix/issues/1589

Bootstrap-Vue CSS 编译在 Laravel Mix

Bootstrap-Vue CSS compilation in Laravel Mix

laravel

webpack

vue.js

laravel-mix

bootstrap-vue