linux - 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

和/或:

npm rebuild node-sass

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

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

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

希望对您有所帮助!