S CSS Как загрузить ссылки на стиль в стиле относительно исходных файлов (ошибка: относительные модули не найдены) - PullRequest
Новая
       62

S CSS Как загрузить ссылки на стиль в стиле относительно исходных файлов (ошибка: относительные модули не найдены)

2 голосов
/ 29 марта 2020

Прежде всего, спасибо за любую помощь, вы потрясающие. Я борюсь с этой настройкой, чтобы заставить ссылочные ресурсы из s css работать правильно. Я имею в виду загрузку через веб-пакет и заставить их работать как в среде разработки, так и на производстве.

У нас есть Laravel проект с Vue внешним интерфейсом, и мы делаем то, что laravel отвечает за построение представлений и предоставление необходимых данных, в то время как Vue предоставляет тип строительных блоков как ресурс компонентов пользовательского интерфейса.

Эта часть Vue также использует библиотеку пользовательского интерфейса, основанную на среде квазара (квазар не имеет отношения к этой проблеме). Так что это библиотека пользовательского интерфейса, общая для всех проектов компании.

ПРОБЛЕМА: Я не могу выполнить работу, так как стили, загруженные из библиотеки пользовательского интерфейса, которые ссылаются на ресурсы (шрифты, изображения), не могут их загрузить.

Эти относительные модули не были найдены:

* ../assets/fonts/BebasNeue-Web.eot in ./node_modules/css-loader/dist/cjs.js ?? исх -.! 8-oneOf-1-1 ./ node_modules / vue -loader / Lib / погрузчики / stylePostLoader js ./ node_modules / пост css -loader / ср c ?? исх - 8-oneOf-1-2 ./ node_modules / дерзость-погрузчик / расстояние / cjs 1063 * ?? исх -.! 8-oneOf-1-3 ./ node_modules / . кэш-погрузчик / расстояние / cjs 1066 * ?? исх -! 0-0 ./ node_modules / vue -loader / Lib ?? vue -loader-опции ./ SRC / Приложение. 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 / кэш-погрузчик / расстояние / cjs 1083 * ?? исх -.! 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 &

Так выглядит файл s css как в пользовательской библиотеке 

$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

  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. Я не мог разбить URL из общей общей папки между Laravel и Vue.

Минимальное воспроизведение здесь: https://github.com/luckylooke/laravel-vue-cli

РЕДАКТИРОВАТЬ 30/3/2020: описание цепочки: ./src/components/HelloWorld.vue имеет атрибут, которому предшествует @import "ui-lib_vars", настроенный в параметрах sass-loader 

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

в ui-lib_vars $ ui- lo go -bg: url ('# {$ ui-imagesPath} lo go .png'); где $ ui-imagesPath: '../assets/images/'; это правильный относительный путь к ресурсу.

Когда я отключаю css параметр загрузчика "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...

, что интересно, что шрифты ссылаются на то же самое, и они не спорят о "модуле не найден", но они также не загружаются правильно .. они загружают какой-то неизвестный шрифт basi c и в консоли есть предупреждения 

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". Ситуация такая, как описано выше в первой версии вопроса

Любая помощь приветствуется, спасибо.

...