3

首先感谢您的帮助，您太棒了。我正在努力使用此设置以使来自 scss 的 url 引用资源正常工作。我的意思是通过 webpack 加载并让它们在开发环境和生产环境中工作。

我们有带有 Vue 前端的 Laravel 项目，我们所做的是 laravel 负责构建视图并提供所需的数据，而 Vue 提供构建块类型的 UI 组件资源。

这个 Vue 部分也是使用基于 quasar 框架的公司 ui 库（quasar 与这个问题无关）。所以它是跨公司项目共享的 UI 库。

问题：我无法使从 ui 库加载的引用资源（字体、图像）的样式无法加载它们。

未找到这些相关模块：

* ../assets/fonts/BebasNeue-Web.eot 在 ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/ loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf- 1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue ?vue&type=style&index=0&lang=scss&, ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js !./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!. /node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/HelloWorld.vue?vue&type=样式&index=0&id=469af010&scoped=true&语言=scss&

这就是 ui-library 中 scss 文件的样子

$ui-imagesPath: '../assets/images/';
$ui-fontsPath: '../assets/fonts/';

@font-face {
  font-family: BebasNeue;
  src: url('#{$ui-fontsPath}BebasNeue-Web.eot');
  src: url('#{$ui-fontsPath}BebasNeue-Web.eot?#iefix')
      format('embedded-opentype'),
    url('#{$ui-fontsPath}BebasNeue-Web.woff2') format('woff2'),
    url('#{$ui-fontsPath}BebasNeue-Web.woff') format('woff'),
    url('#{$ui-fontsPath}BebasNeue-Web.ttf') format('truetype');
  /* url('#{$ui-fontsPath}BebasNeue-Web.svg#BebasNeue-Web') format('svg')}'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

$ui-font-family-generic: Arial, Helvetica, sans-serif;
$ui-font-family-base: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI',
  Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
  'Segoe UI Symbol';
$ui-font-family-secondary: BebasNeue, Helvetica, Arial, sans-serif;

$ui-logo-bg: url('#{$ui-imagesPath}logo.png');

我试图通过在 vue.config.js 中配置 webpack 来解决它

  chainWebpack: config => {

    // Source: github.com/vuejs/vue-cli/issues/2099#issuecomment-544877183

    ['vue-modules', 'vue', 'normal-modules', 'normal'].forEach(rule => {
      config.module
        .rule('scss')
        .oneOf(rule)
        .use('resolve-url-loader')
        .loader('resolve-url-loader')
        .tap(options =>
          _.merge(options, {
            sourceMap: true,
          })
        )
        .before(SASS_LOADER)
        .end()
        .use(SASS_LOADER)
        .loader(SASS_LOADER)
        .tap(options =>
          _.merge(options, {
            sourceMap: true,
          })
        )
        .end();
    });

    config.module
      .rule('fonts')
      .test(/\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/)
      .use('file-loader')
      .loader('file-loader')
      .tap(options =>
        _.merge(options, {
          name: '[name].[ext]',
          outputPath: 'fonts/',
          publicPath: 'assets/fonts/',
        })
      )
      .end();
  },

和

  css: {
    loaderOptions: {
      // source: https://stackoverflow.com/a/51475617/861615
      css: {
        url: false
      },
      scss: {
        sassOptions: {
          includePaths: [
            path.resolve(__dirname, "./src/styles"),
            path.resolve(__dirname, "./src/ui-library/styles")
          ]
        },
        // include variables into every component
        prependData: `
            @import "ui-lib_vars";
        `
      }
    }
  }

但它不加载资源

我需要在本地开发中加载这些字体图像的解决方案，而且当我构建到 dist 时它也是正确的。我无法破坏 Laravel 和 Vue 之间公共共享文件夹中的 url。

这里的最小复制：https ://github.com/luckylooke/laravel-vue-cli

编辑 30/3/2020：链描述：./src/components/HelloWorld.vue 具有在 sass-loader 选项中配置的 @import "ui-lib_vars" 前置的属性

prependData: `
            @import "ui-lib_vars";
        `

在 ui-lib_vars $ui-logo-bg: url('#{$ui-imagesPath}logo.png'); 其中 $ui-imagesPath: '../assets/images/'; 这是资源的正确相对路径。

当我关闭 css loader 选项“url: false”时，情况如下：

 ERROR  Failed to compile with 1 errors                                                                                          9:10:27 AM

This relative module was not found:

\* ../assets/images/logo.png in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/resolve-url-loader??ref--8-oneOf-1-3!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-4!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/HelloWorld.vue?vue&type=style&index=0&id=469af010&scoped=true&lang=scss&
Type checking in progress...

有趣的是字体被引用相同并且他们没有争论“未找到模块”但它们也没有正确加载..它们加载了一些未知的基本字体并且在控制台中有警告

localhost/:1 Failed to decode downloaded font: data:font/woff2;base64,bW9kdWxlLmV4cG9ydHMgPSAiYXNzZXRzL2ZvbnRzL0JlYmFzTmV1ZS1XZWIud29mZjIiOw==
localhost/:1 Failed to decode downloaded font: data:font/woff;base64,bW9kdWxlLmV4cG9ydHMgPSAiYXNzZXRzL2ZvbnRzL0JlYmFzTmV1ZS1XZWIud29mZiI7
localhost/:1 Failed to decode downloaded font: data:font/ttf;base64,bW9kdWxlLmV4cG9ydHMgPSAiYXNzZXRzL2ZvbnRzL0JlYmFzTmV1ZS1XZWIudHRmIjs=
12OTS parsing error: invalid version tag

否则，将选项“url：false”留在那里..情况如上所述，在问题的第一个版本中

任何帮助表示赞赏，谢谢。

4

0 回答 0