WordPress vuejs 样板引导程序安装错误

Question

我是vuejs的新手，并找到了一个wordpress样板主题来开始工作，但是我无法使事情正常工作。

我正在尝试将 bootstrap-vue 包含在主题中，但在运行"npm 运行开发或构建或观看"---时收到以下错误

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)

这是我的第二次服务器，也是第四次尝试尝试将引导程序与主题一起使用。

到目前为止，这些是我创建新服务器并尝试使用主题和引导程序的所有步骤---

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

我做错了什么？

网页包配置

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 有时可以解决问题(来源(：

npm install --save-dev webpack

和/或：

npm rebuild node-sass

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

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

看看它是否有效。如果是这样，请逐步添加当前文件并检测确切的故障点(可能是 css 加载器(。

希望对您有所帮助！