Question

我正在使用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）

Answer 1

最后，找到了一个解决方案 - 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

Answer 2

安装：

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

使用：

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

从＆＃39; vue＆＃39;
从＆＃39; bootstrap-vue＆＃39;
Vue.use（BootstrapVue）

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

导入样式：
- import＆＃39; ~bootstrap / dist / css / bootstrap.css＆＃39;
- import＆＃39; ~bootstrap-vue / dist / bootstrap-vue.css＆＃39;

确保app.js和app.css包含在充当vue容器的刀片（视图）中。请参阅：https://bootstrap-vue.js.org/docs/

Laravel Mix中的Bootstrap-Vue CSS编译

2 个答案: