Size: a a a

Webpack — русскоговорящее сообщество

2020 March 20

AB

Alexander Berezin in Webpack — русскоговорящее сообщество
Подскажите плиз, проект на Vue, мне нужно импортировать css из файла в виде string, при этом чтобы код css обработался как при обычном импорте
источник

AB

Alexander Berezin in Webpack — русскоговорящее сообщество
конкретнее - как сделать такое?

// добавляем css в проект
require('./skin/dialog.css');

// а здесь нужен этот же самый css, но только в виде текста
const css = require('./skin/dialog.css');
источник

P

PH_cheerokee in Webpack — русскоговорящее сообщество
{
         test: /\.(svg|png|jpg|gif)$/,
         use: {
           loader: 'file-loader',
           options: {
             name: '[name].[ext]',
             outputPath: 'assets',
           },
         },
       },

почему не подгружает фото?
источник

АХ

Амир Хан in Webpack — русскоговорящее сообщество
Alexander Berezin
конкретнее - как сделать такое?

// добавляем css в проект
require('./skin/dialog.css');

// а здесь нужен этот же самый css, но только в виде текста
const css = require('./skin/dialog.css');
.toString()?
источник

AB

Alexander Berezin in Webpack — русскоговорящее сообщество
Амир Хан
.toString()?
при require css возвращается пустой объект 😭
источник

АХ

Амир Хан in Webpack — русскоговорящее сообщество
Alexander Berezin
при require css возвращается пустой объект 😭
А import?
источник

АХ

Амир Хан in Webpack — русскоговорящее сообщество
import st from ''
источник

AB

Alexander Berezin in Webpack — русскоговорящее сообщество
Амир Хан
А import?
то же самое
источник

АХ

Амир Хан in Webpack — русскоговорящее сообщество
Скрин сделай
источник

АХ

Амир Хан in Webpack — русскоговорящее сообщество
кода
источник

AB

Alexander Berezin in Webpack — русскоговорящее сообщество
Амир Хан
Скрин сделай
источник

AB

Alexander Berezin in Webpack — русскоговорящее сообщество
источник

АХ

Амир Хан in Webpack — русскоговорящее сообщество
Это файл проходит через babel в сборке?
источник

P

PH_cheerokee in Webpack — русскоговорящее сообщество
Подскажите,где глянуть почему не подгружаются картинки?
источник

A

Aleksandr in Webpack — русскоговорящее сообщество
PH_cheerokee
Подскажите,где глянуть почему не подгружаются картинки?
В сборке они появляются?
источник

AB

Alexander Berezin in Webpack — русскоговорящее сообщество
Амир Хан
Это файл проходит через babel в сборке?
да, это проект vue.
я не пойму, как устроены эти лоадеры, как их можно перезаписать, я пока что тупо не могу найти даже где они прописаны, всё перекопал.

только что нагуглил, типа если поставить восклицательный знак в начале, тогда лоадеры типа все сбросятся установленные.

вот теперь работает вот так, через toString() показывает код норм
const x1 = require('!css-loader!./skin/editor.css');


Но вот проблема, мне нужно получить именно ту самую строку, которая собиратеся уже установленными лоадерами, с минификацией, подгрузкой файлов и прочим, чтобы css в проекте и в переменной были идентичны
источник

P

PH_cheerokee in Webpack — русскоговорящее сообщество
Aleksandr
В сборке они появляются?
{
         test: /\.(gif|png|jpe?g|svg)$/i,
         use: [
           {
             loader: 'file-loader',
             options: {
               name: '[name].[ext]',
               outputPath: 'img/',
             },
           },
           {
             loader: 'image-webpack-loader',
             options: {
               bypassOnDebug: true,
             },
           },
         ],
       },
import logo from '../assets/medialogo.png'
говорит,что такого файла нет
короче не видит его
источник

АХ

Амир Хан in Webpack — русскоговорящее сообщество
Alexander Berezin
да, это проект vue.
я не пойму, как устроены эти лоадеры, как их можно перезаписать, я пока что тупо не могу найти даже где они прописаны, всё перекопал.

только что нагуглил, типа если поставить восклицательный знак в начале, тогда лоадеры типа все сбросятся установленные.

вот теперь работает вот так, через toString() показывает код норм
const x1 = require('!css-loader!./skin/editor.css');


Но вот проблема, мне нужно получить именно ту самую строку, которая собиратеся уже установленными лоадерами, с минификацией, подгрузкой файлов и прочим, чтобы css в проекте и в переменной были идентичны
Ну ты ведь так отменяешь прогон через лоадер
источник

АХ

Амир Хан in Webpack — русскоговорящее сообщество
PH_cheerokee
{
         test: /\.(gif|png|jpe?g|svg)$/i,
         use: [
           {
             loader: 'file-loader',
             options: {
               name: '[name].[ext]',
               outputPath: 'img/',
             },
           },
           {
             loader: 'image-webpack-loader',
             options: {
               bypassOnDebug: true,
             },
           },
         ],
       },
import logo from '../assets/medialogo.png'
говорит,что такого файла нет
короче не видит его
Путь верный?
источник

P

PH_cheerokee in Webpack — русскоговорящее сообщество
Амир Хан
Путь верный?
да
источник