Vite で Sass から CSS にトランスパイルする際に、background-imageのパスが解決しない問題

vite設定

      rollupOptions: {
        input: getHtml(),
        output: {
          entryFileNames: `assets/js/[name].js`,
          assetFileNames(assetInfo) {
            if (assetInfo.name) {
              const cssExtRegex = /\.(css)$/i;
              if (cssExtRegex.test(assetInfo.name)) {
                return `assets/css/css/${assetInfo.name}`;
              }

              const imgExtRegex = /\.(jpe?g|png|svg)$/i;
              if (imgExtRegex.test(assetInfo.name)) {
                return `assets/images/${assetInfo.name}`;
              }

              const movieExtRegex = /\.(mp4)$/i;
              if (movieExtRegex.test(assetInfo.name)) {
                return `assets/movies/${assetInfo.name}`;
              }
            }


            return `assets/${assetInfo.name}`;
          },
        },
      },

assetsFileNamesで、cssを分岐させるとbackgorund-imageのパスが return assets/${assetInfo.name}; の相対パスに設定される。

たたた

rollupOptionsのinputの階層と、outputのdefaultの階層によってbackground-imageのパスが変わる。

つまり下記の部分の階層で決まる。

vite設定

      rollupOptions: {
        input: getHtml(), // inputの階層
        output: {
          entryFileNames: `assets/js/[name].js`,
          assetFileNames(assetInfo) {
            if (assetInfo.name) {
              const cssExtRegex = /\.(css)$/i;
              if (cssExtRegex.test(assetInfo.name)) {
                return `assets/css/css/${assetInfo.name}`;
              }

              const imgExtRegex = /\.(jpe?g|png|svg)$/i;
              if (imgExtRegex.test(assetInfo.name)) {
                return `assets/images/${assetInfo.name}`;
              }

              const movieExtRegex = /\.(mp4)$/i;
              if (movieExtRegex.test(assetInfo.name)) {
                return `assets/movies/${assetInfo.name}`;
              }
            }

            return `assets/${assetInfo.name}`; // outputの階層
          },
        },
      },

このスクラップは2023/08/22にクローズされました