Laravel Mix 中的 Bootstrap-Vue CSS 编译答案

【问题标题】：Bootstrap-Vue CSS compilation in Laravel MixLaravel Mix 中的 Bootstrap-Vue CSS 编译
【发布时间】：2018-08-13 23:01:36
【问题描述】：

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

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

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

注意：需要webpack配置才能加载css文件（official guide）

【问题讨论】：

标签： laravel webpack vue.js laravel-mix bootstrap-vue

【解决方案1】：

安装：

npm i bootstrap-vue
npm install --save-dev style-loader css-loader

用途：

编辑资源/js/app.js 到：

从“vue”导入 Vue
从“bootstrap-vue”导入 BootstrapVue
Vue.use(BootstrapVue)

编辑资源/sass/app.scss 到：

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

确保 app.js 和 app.css 包含在作为 vue 容器的刀片（视图）中。见：https://bootstrap-vue.js.org/docs/

【讨论】：

我在询问 CSS。 JS 和 CSS 都适合我。只想将 CSS 从 <style> 标签移动到我编译的 CSS 文件中。
@Roman Tolstoy，你只需要添加： import 'bootstrap/dist/css/bootstrap.css';导入'bootstrap-vue/dist/bootstrap-vue.css'
这无助于摆脱 BootstrapVue 插入到 <head> 中的 <style> 标签。
@RomanTolstoy 所以你想使用<link rel="stylesheet" href="path/to/stylesheet"> 而不是<style>/** shit tons of injected css **/</style>？
我 am 已经在使用已编译的 app.css 文件（包含 Laravel Mix 编译的所有 CSS 的结果文件）。我只希望将 Bootstrap-Vue 组件中的所有这些内联样式包含在 app.css 中，而不是使页面变大。

【解决方案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

【讨论】：