4

我正在使用 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 文件（官方指南）

4

2 回答 2

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

于 2018-04-12T10:46:50.903 回答
1

安装：

  1. npm 我引导-vue
  2. npm install --save-dev style-loader css-loader

利用：

编辑 resources/js/app.js 到：

  1. 从 'vue' 导入 Vue

  2. 从“bootstrap-vue”导入 BootstrapVue

  3. Vue.use(BootstrapVue)

编辑 resources/sass/app.scss 到：

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

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

于 2018-03-07T04:17:46.120 回答