npm run buildを実行するとvue-cli-service buildでエラーとなる

Question

初めましてVue.js勉強中の者です。
コンポーネント全体に共通のcss,scssを読み込ませるために以下のサイトを参考にしました。
https://www.expexp.jp/webpack/

しかしnpm run buildコマンドを実行すると以下のエラーが発生します。

C:\Users\Wildf\vue_app>npm run build

> vue_app@0.1.0 build C:\Users\Wildf\vue_app
> vue-cli-service build


\  Building for production...

 ERROR  Failed to compile with 1 errors                                                                                                                                           10:36:38

This relative module was not found:

* ../css/main.css in ./src/main.js
 ERROR  Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue_app@0.1.0 build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue_app@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Wildf\AppData\Roaming\npm-cache\_logs\2020-04-29T01_36_38_990Z-debug.log

実行したコマンドは以下です。(Docker上にプロジェクトを作成しました)

開発用のフォルダを作成し、フォルダ内で以下のコマンドを順番に実施
npm install --save @vue/cli-service
npm add webpack@latest
npm install -g @vue/cli @vue/cli-init
vue init webpack-simple test_app

プロジェクトフォルダに移動し以下のコマンドを順番に実施
cd test_app
npm install --save @vue/cli-service
docker-compose build
docker-compose up -d
docker ps
docker exec -it <コンテナID> sh
vue create vue_app

作成したらCtrl + Dで抜けてvue_appフォルダへ移動しページが表示されるかを確認
cd vue_app
npm run serve

以下のエラーが発生する

'vue-cli-service' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

node_modulesをいったん削除し以下のコマンドを実行する
npm install

再度実行
npm run serve

ページが表示できたので停止し以下のコマンドを順番に実施
npm install -D @webpack-cli/init
npm install vue-loader --save-dev

webpack.config.jsを作成し、以下を追加する

module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
      path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: "vue-loader"
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
};

以下を実行する
npx webpack

Hash: XXXXXX
Version: webpack 4.43.0
Time: 440ms
Built at: 2020-04-29 10:27:21
Asset Size Chunks Chunk Names
bundle.js 254 KiB main [emitted] main
Entrypoint main = bundle.js
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
[./src/App.vue] 338 bytes {main} [built]
[./src/bar.js] 71 bytes {main} [built]
[./src/main.js] 168 bytes {main} [built]
+ 5 hidden modules

以下のコマンドを実行する
npm i -D css-loader style-loader

webpack.config.jsのrulesに以下を追加

      {
        test: /.css/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              url: false
            }
          }
        ],
      }

srcフォルダ下にcssフォルダを作成し、その中にmain.cssというファイルを作成。以下を追加する

@charset "UTF-8";

body {
  background: yellow;
}

main.jsにcssを読み込むimport文を追加する

import '../css/main.css';

ビルドを行う。
npm run build

エラーとなる

ちなみにですが、package.jsonの中身は以下となっています。

{
  "name": "vue_app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.3.0",
    "@vue/cli-plugin-eslint": "~4.3.0",
    "@vue/cli-service": "~4.3.0",
    "babel-eslint": "^10.1.0",
    "css-loader": "^3.5.3",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "style-loader": "^1.2.1",
    "vue-loader": "^15.9.1",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

エラー内容で表示されているログファイルの中身も確認しましたが、特にヒントとなるような情報はありませんでした。
グーグルで検索してみましたが有力となるような情報が見つかりませんでした。
Vue.jsにお詳しい方がいましたらご回答いただけないでしょうか？

Answer 1

webpackの勉強をされるのでしたら、参考ページの情報は有用だと思いますが、
Vue CLIを使ってプロジェクトを作成されているのでしたら、もっとサクッとできますよ。

Sassを使いたければ、
vue createの時にManually select featuresを選択すれば、
CSS Pre-processorsを使うか否か、使うなら何を使うのか等を選択できます。

webpack等も標準で入っています。
通常webpackの設定はwebpack.config.jsなどに書きますが、
Vue CLIで作成したプロジェクトの場合vue.config.jsに書きます。

あと、コマンドのエラーについてですが、
Windowsをお使いですか？
環境変数PATHの設定が必要な時に出るエラーな気がします。
Windowsにはあまり詳しくないため確信はないです、、、

Comments

[Linkey]

vue createでManually select featureを使ってcssの読み込みができました。ありがとうございます。

[退会済みユーザー]

解決してよかったです。
Vue CLIは様々な機能が装備されているので、それを使うと簡単にできますが、
自前で環境構築する際にはお調べになった作業が必要になりますので、今後に役立つと思います^^