Unknown word(5:1) | Vue.js parte 2: construindo Single Page Applications

Boa tarde.

Estava add as configurações no webpack.config.js para conseguir utilizar o bootstrap mas está apresentando a mensagem "Unknown Word(5:1)"

Versão do Vue:

vue --version
2.7.0

Console:

ERROR in ./node_modules/css-loader!./node_modules/style-loader!./node_modules/css-loader!./node_modules/bootstrap/dist/css/bootstrap.css
Module build failed: Unknown word (5:1)

  3 | // load the styles
  4 | var content = require("!!../../../css-loader/index.js!./bootstrap.css");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
    | ^
  6 | // add the styles to the DOM
  7 | var update = require("!../../../style-loader/addStyles.js")(content, {});
  8 | if(content.locals) module.exports = content.locals;

 @ ./node_modules/bootstrap/dist/css/bootstrap.css 4:14-131 13:3-17:5 14:22-139
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

package.json

 "dependencies": {
    "bootstrap": "^3.3.7",
    "vee-validate": "^2.0.0-beta.25",
    "vue": "^2.5.11",
    "vue-resource": "^1.0.3",
    "vue-router": "^2.1.1"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.25.0",
    "file-loader": "^1.1.4",
    "node-sass": "^4.5.0",
    "sass-loader": "^4.1.1",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }

webpack.config.js

...
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      },
        {
            test: /\.css$/,
            loader: 'style-loader!css-loader'
        },
        { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
        { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream' },
        { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader' },
        { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' }
    ]
},
...

main.js

...
import 'bootstrap/dist/css/bootstrap.css';
...

Ao realizar o import do bootstrap na main e tentar buildar, apresentava a mesma mensagem de erro que na video aula (necessitava de um loader), mas prosseguindo, só apresentou esse erro a cima em Console.

Caso necessite, segue o link do projeto no github: VueJS-Class

Desde já agradeço.

Oi Ricardo, tudo bem?

Eu vi o seu código no github, e percebi que você já tinha colocado logo no começo a regra pros arquivos CSS:

...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      }, 
...

Tente remover o mesmo e verifique se deu certo.

O problema deve estar no caminho do arquivo que você está especificando:

./node_modules/css-loader!./node_modules/style-loader!./node_modules/css-loader!./node_modules/bootstrap/dist/css/bootstrap.css

Esse erro ocorreu porque, de alguma forma, está sendo repetido o caminho para o arquivo css do bootstrap.

Lembre-se que o VueJs é inteligente para gerar configuração de loader para arquivos como CSS e SASS/SCSS.

Abraço!