@ctrlzrposted at 2022-07-25

vue の webpack でエラー

Q&A

解決したいこと

vue＋vuetify プロジェクトで、materialdesigniconsを使用すると、fontの参照先がおかしくなります。
（ローカルサーバ起動では問題なく動いています。）

発生している問題・エラー

fontを使用しているページを表示すると、ブラウザのコンソールに以下のエラーが出ます。

https://localhost:8443/static/css/static/fonts/materialdesignicons-webfont.0fb040c.woff2 net::ERR_ABORTED 404 (Not Found)

/static/css のパスが余計です。
/static/css/static/fonts/にファイルをコピーすれば動きます

該当するソースコード

webpack.js(抜粋)

  module: {
    rules: [

      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      },

      {
        test: /\.s(c|a)ss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            // Requires sass-loader@^7.0.0
            options: {
              implementation: require('sass'),
              indentedSyntax: true, // optional
              data: "@import '@/styles/variables.scss'" // 中身は空
            },
            // Requires >= sass-loader@^8.0.0
            options: {
              implementation: require('sass'),
              sassOptions: {
                indentedSyntax: true // optional
              },
              prependData: "@import '@/styles/variables.scss'" // 中身は空
            },
            options: {
              // This is the path to your variables
              additionalData: "@import '@/styles/variables.scss'" // 中身は空
            },            
          },
        ],
      },

package.json(抜粋)

  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.9",
    "@fortawesome/free-solid-svg-icons": "5.3.1",
    "@fortawesome/vue-fontawesome": "^0.1.3",
    "@mdi/font": "^6.6.96",
    "babel-polyfill": "6.26.0",
    "material-design-icons-iconfont": "^4.0.3",
    "raw-loader": "^4.0.2",
    "vue": "^2.5.2",
    "vuetify": "^2.6.4",
    "vuex": "3.0.1",
  },
  "devDependencies": {
    "babel-loader": "^7.1.1",
    "css-loader": "^0.28.0",
    "file-loader": "^1.1.4",
    "sass-loader": "^7.3.1",
    "sass-resources-loader": "^2.2.4",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.1.2",
    "webpack": "^3.6.0",
  },

build後のフォルダ構成

index.html
static
└css
└fonts
└img
└js

app.css(build後css 抜粋)

src:url(static/fonts/materialdesignicons-webfont.ff90567.eot?#iefix&v=6.6.96)

static/fonts を ../fontsに編集すると正しく動きます。

自分で試したこと

url-loader をfile-loader に変更
webpack.js のオプションを変更

CDNにすれば動きますが、このままでは今後のために良くないので解決したいです。

Are you sure you want to delete the question?