wordpress vuejs 样板 bootstrap 安装错误

Question

我是 vuejs 的新手，找到了一个 wordpress boilerplate theme 开始工作，但是我无法正常工作。

我正在尝试将 bootstrap-vue 包含到主题中，但是当运行 'npm run dev or build or watch' ---

时我收到以下错误

    ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/lib/index.js):
TypeError: Cannot read property 'charCodeAt' of undefined
    at module.exports (/var/www/html/wp-content/themes/vuejs-wordpress-theme-starter-master/node_modules/postcss-value-parser/lib/parse.js:17:22)
    at new ValueParser (/var/www/html/wp-content/themes/vuejs-wordpress-theme-starter-master/node_modules/postcss-value-parser/lib/index.js:7:22)

这是我的第二台服务器，也是我第 4 次尝试使用 bootstrap 主题。

到目前为止，这些是我创建新服务器并尝试使用主题加上 bootstrap ---

的所有步骤

>          - Create server on Digital Ocean using wordpress marketplace image      
>            setup.    
>          - Set domain to server on DO
>          - Log in SSH and run setup script.
>          - Wait for propagation.
>          - Then do this - https://www.digitalocean.com/community/tutorials/how-to-secure-apache-with-let-s-encrypt-on-ubuntu-18-04
>          - Change http to https in dashboard.
>          - Copied vue theme over to directory using SFTP.
>          - Install NPM with --- apt install npm
>          - CD into theme directory and run npm install
>          - Then run - npm run watch or npm run dev
>          - install node run --- curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
>          - then run -- sudo apt-get install -y nodejs
>          - cd into directory then npm install --save-dev cross-env
>          - then - npm audit fix
>          - then - npm install --save-dev css-loader@3.2.0
>          - then - npm install --save-dev webpack-cli@3.3.9
>          - then delete package.loc
>          - then - run npm install babel-preset-stage-2 --save-dev
>          - then - run npm install --dev 
>          postcss-loader 
>          postcss-import 
>          postcss-cssnext 
>          cssnano 
>          sugarss 
>          autoprefixer --save-dev
>          - then run install vue-loader (look up command)
>          - comment out webconfig - minimize true
>          - then run npm install --save-dev css-loader sass-loader node-sass extract-loader file-loader
>          - copied previous webconfig file
>          - navigate to folder then run npm install bootstrap
>          - add import in app.js -
>          - import 'bootstrap/dist/css/bootstrap.css'
>          - import 'bootstrap-vue/dist/bootstrap-vue.css'
>          - before initating vue, add -- Vue.use(BootstrapVue)`
           - then run - npm install vue --save
           - npm install vue
           - npm install vue-template-compiler

我做错了什么？

WEBPACK CONFIG

Answer 1

首先，我会确保所有加载程序都加载了您的 package.json 文件（我在您的步骤中只看到其中一个）：

vue-style-loader 和 css-loader

其次，在你的 webpack 配置中，你的 module.rules 应该有这个对象：

{
  test: /\.css/,
  use: ['vue-style-loader', 'css-loader'] // BOTH are needed!
}

并从 App.vue 加载它，在部分下，您应该导入：

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

最后，确保在 Vue 声明之前加载 VueBootstrap，例如：

...
import router from './router';

Vue.use(BootstrapVue);

new Vue({
  el: '#app',
  ...

更新：

重新安装 webpack 有时可以解决问题 (source):

npm install --save-dev webpack

And/or:

npm rebuild node-sass

如果这些都没有帮助，我会尝试使用更简单的 CSS 规则，例如：

module: {
    rules: [
      {
        test: /\.(s*)css$/,
        use: [
          'sass-loader',
          'css-loader',
          'style-loader'
        ]
      },
 ...

然后看看它是否有效。如果是，请逐步添加当前文件并检测确切的故障点（可能是 css-loader）。

希望对您有所帮助！

wordpress vuejs 样板 bootstrap 安装错误

wordpress vuejs boilerplate bootstrap install error

linux

wordpress

vue.js

bootstrap-4

bootstrap-vue