wordpress vuejs boilerplate bootstrap install error

Question

I am new to vuejs and found a wordpress boilerplate theme to start working off of, however I am unable to get things working correctly.

I am trying to include bootstrap-vue into the theme but I am receiving the following error when running '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)

This is my second server and 4th attempt at trying to use bootstrap with the theme.

So far these are all my steps for creating a new server and trying to use the theme plus 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 [email protected]
>          - then - npm install --save-dev [email protected]
>          - 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

What am I doing wrong?

WEBPACK CONFIG

You can use VueJS without using the VueJS template. I do so! So first of all try VueJS inside wordpress using the CDN vuejs.org/v2/guide If you still want to try the theme, why don't you try running npm on your local computer instead of Digital Ocean? — gtamborero
– gtamborero, Commented Oct 24, 2019 at 21:21
thanks but i am going to use the vuejs theme and do it that way. — 730wavy
– 730wavy, Commented Oct 24, 2019 at 23:33

JP. Aulet · Accepted Answer · 2019-10-25 19:09:52Z

1

+50

first I would make sure all the loaders are loaded with your package.json file (I only see one of them in your steps):

vue-style-loader and css-loader

Second, in your webpack config, your module.rules should have this object:

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

And load it from the App.vue, under the section, you should import:

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

Finally, make sure you load the VueBootstrap before the Vue declaration, like:

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

Vue.use(BootstrapVue);

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

Update:

Re-installing webpack sometimes solves the issue (source):

npm install --save-dev webpack

And/or:

npm rebuild node-sass

If nothing of this helps, I would try using a simpler CSS rule, like:

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

And see if it works. If it does, go step by step adding your current file and detect the exact point of failure (it could be the css-loader).

Hope it helps!

edited Oct 25, 2019 at 19:09

answered Oct 25, 2019 at 15:58

JP. Aulet

4,4164 gold badges30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

730wavy Over a year ago

Hi, im still running into the issue, I updated my question with the webpack config.

730wavy Over a year ago

Yes finally I think I got it figured out! It seems to be working now, Thank you! Only thing is the loaders' order is important. So the style loader in use goes first, then css loader then sass loader.

Collectives™ on Stack Overflow

wordpress vuejs boilerplate bootstrap install error

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related