Git Product home page Git Product logo

Comments (10)

webdiscus avatar webdiscus commented on June 7, 2024

Hallo @AndreyGudin,

thank you for very important issue report.
The bug with data-url is fixed in new version 1.3.2.

from pug-plugin.

webdiscus avatar webdiscus commented on June 7, 2024

To fix the problem with a font:

  • remove / at begin of the filename in the generator, because it is relative path by output.publicPath : 
    {
  test: /\.(woff|woff2|eot|ttf|otf|svg)$/i,
  type:'asset/resource',
  //include: path.resolve(__dirname, './src/fonts'), // <-- optional, you can spare it, works without this include
  generator: {
    filename: 'assets/fonts/[hash][ext][query]' // <-- here remove `/`
  }
}
  • optional, disable the resolve-url-loader, pug-plugin can resolve required resources, your sample work without this loader too
  • optional, like the MiniCssExtractPlugin, the filename for CSS can be defined in options of PugPlugin.extractCss: 
    plugins: [
  new PugPlugin({
    modules: [
      PugPlugin.extractCss({
        filename: 'assets/css/[name].[contenthash:8].css',
      }),
    ],
  }),
],
    In this case don't need the generator for scss rule.

💡 Recomendation

If you render a pug template into static HTML, use please pug-loader option method: render. This method is faster as default compile method:

{
  test: /\.pug$/,
  loader: PugPlugin.loader,
  options: {
    method: 'render',
  }
},

The default method compile (if no method defined or method is compile) use only for load a pug template as the template function in JavaScript, see usage example in JavaScript.

from pug-plugin.

AndreyGudin avatar AndreyGudin commented on June 7, 2024

Sorry for the trouble, but this does not work for the fonts.

[pug-plugin] Can't resolve the file ../fonts/Montserrat-Regular.eot

webpack.config:

let mode='development';
const PugPlugin= require('pug-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
if (process.env.NODE_ENV === 'production') {
  mode = 'production'
}

console.log(mode + 'mode')

module.exports={
  mode: mode,
  output:{
    filename:'[name].[contenthash].js',
    path:path.resolve(__dirname,'dist'),
    publicPath:'/',
    assetModuleFilename:'assets/[hash][ext][query]',
    clean: true,
  },
  entry:{
    uiforms:'./src/pages/ui-kit/ui-forms/ui-forms.pug',
    uiformsScripts:'./src/pages/ui-kit/ui-forms/ui-kit.js'
  },
  devtool: 'source-map',
  plugins:[
    new PugPlugin({
      modules:[
        PugPlugin.extractCss({
          filename: 'assets/css/[name].[contenthash:8].css',
        }),
      ]
    }),
  ],
  module: {
    rules:[
      {
        test: /\.pug$/,
        loader: PugPlugin.loader,
        options:{
          method: 'render',
        }
      },
      {
        test: /\.scss$/,
        type:'asset/resource',
        use:[
          "css-loader","sass-loader"
        ]
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type:'asset/resource',
        exclude: path.resolve(__dirname, './src/fonts'),
        generator: {
          filename: 'assets/img/[hash][ext][query]'
        }
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf|svg)$/i,
        type:'asset/resource',
        generator: {
          filename: 'assets/fonts/[hash][ext][query]'
        }
      }
    ]
  },
};

I have this catalog's structure:

1

I used path relative to _variable.scss, tried relative to ui-forms.scss - same error. Tried to move fonts in scss folder - same error:
1

@font-face{
	font-family: 'Conv_Montserrat-Regular';
	src: url('./fonts/Montserrat-Regular.eot');
	src: local('☺'), url('./fonts/Montserrat-Regular.woff') format('woff'), url('./fonts/Montserrat-Regular.ttf') format('truetype'), url('./fonts/Montserrat-Regular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Conv_Montserrat-Bold';
	src: url('./fonts/Montserrat-Bold.eot');
	src: local('☺'), url('./fonts/Montserrat-Bold.woff') format('woff'), url('./fonts/Montserrat-Bold.ttf') format('truetype'), url('./fonts/Montserrat-Bold.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

from pug-plugin.

webdiscus avatar webdiscus commented on June 7, 2024

Sorry for the trouble, but this does not work for the fonts.

Everything ok, I want to help you, but I need a minimalistic repo with reproducible problem.
Can you please create a simple repo with reproducible issue?

from pug-plugin.

AndreyGudin avatar AndreyGudin commented on June 7, 2024

I created this, same error
https://github.com/AndreyGudin/pugtest

from pug-plugin.

webdiscus avatar webdiscus commented on June 7, 2024

I created this, same error
https://github.com/AndreyGudin/pugtest

thanks for repo, now I can reproduce the issue. I will research the problem to find a solution.

from pug-plugin.

webdiscus avatar webdiscus commented on June 7, 2024

Hello @AndreyGudin,

in new version 1.4.1 is added the resolving of url() function in CSS for relative path and for node modules.

Now works following:

  @use 'material-icons'; /* <= resolve urls in the imported node module */
  @font-face {
    font-family: 'Montserrat';
    src:
      url('../fonts/Montserrat-Regular.woff') format('woff'), /* <= resolve url relative by source */
      url('../fonts/Montserrat-Regular.ttf') format('truetype');
  }

⚠️ Avoid using resolve-url-loader together with PugPlugin.extractCss because the resolve-url-loader is buggy, in some cases fails to resolve an url.

New version has the BREAKING CHANGE:
in webpack config must be removed the type: 'asset/resource' in style rules.

{
  test: /\.(css|sass|scss)$/,
  // type: 'asset/resource', <-- remove the type property
  use: [ 'css-loader', 'sass-loader' ],
},

To use something like link(rel='stylesheet' href=require('./styles.scss')) in pug, the following is enough:

{
  test: /\.(css|sass|scss)$/,
  use: [ 'css-loader', 'sass-loader' ],
},

For more details see the test case.

from pug-plugin.

AndreyGudin avatar AndreyGudin commented on June 7, 2024

Thank you very much! Its working. But i noticed small bug, sometimes pug-plugin throws error, but if i run command again - , no error, succesfull compilation :

npm run dev

> [email protected] dev
> set NODE_ENV=development&&webpack

developmentmode
assets by status 1.04 MiB [cached] 1 asset
Entrypoint uiforms =
Entrypoint assets/js/uiforms 1.04 MiB (1.22 MiB) = assets/js/uiforms.315596938c1e6f36f782.js 1 auxiliary asset
runtime modules 2.27 KiB 10 modules
modules by path ./ 1.15 MiB (javascript) 956 bytes (asset)
  javascript modules 1.15 MiB 21 modules
  asset modules 126 bytes (javascript) 956 bytes (asset)
    ./src/blocks/textfield/textfield_date-dropdown/svg/expand_more.svg 42 bytes (javascript) 244 bytes (asset) [built] [code generated]
    + 2 modules
modules by mime type image/svg+xml 1.34 KiB
  data:image/svg+xml;base64,PHN2ZyB3aWR0aD0i.. 359 bytes [built] [code generated]
  data:image/svg+xml;base64,PHN2ZyB3aWR0aD0i.. 355 bytes [built] [code generated]
  data:image/svg+xml;base64,PHN2ZyB3aWR0aD0i.. 293 bytes [built] [code generated]
  data:image/svg+xml,%3Csvg width=%27.. 362 bytes [built] [code generated]
modules by mime type image/png 1.06 KiB
  data:image/png;base64,iVBORw0KGgoAAAAN.. 536 bytes [built] [code generated]
  data:image/png;base64,iVBORw0KGgoAAAAN.. 545 bytes [built] [code generated]

ERROR in ./src/pages/ui-kit/ui-forms/ui-forms.scss 5:36-98
Module not found: Error: Can't resolve '../../fonts/Montserrat-Regular.eot' in 'C:\Users\Andrey\Codeing\metalamp2\project-metalamp2\src\pages\ui-kit\ui-forms'
 @ ./src/pages/ui-kit/ui-forms/ui-forms.pug 1:216-318

ERROR in ./src/pages/ui-kit/ui-forms/ui-forms.scss 6:36-99
Module not found: Error: Can't resolve '../../fonts/Montserrat-Regular.woff' in 'C:\Users\Andrey\Codeing\metalamp2\project-metalamp2\src\pages\ui-kit\ui-forms'
 @ ./src/pages/ui-kit/ui-forms/ui-forms.pug 1:216-318

ERROR in ./src/pages/ui-kit/ui-forms/ui-forms.scss 7:36-98
Module not found: Error: Can't resolve '../../fonts/Montserrat-Regular.ttf' in 'C:\Users\Andrey\Codeing\metalamp2\project-metalamp2\src\pages\ui-kit\ui-forms'
 @ ./src/pages/ui-kit/ui-forms/ui-forms.pug 1:216-318

ERROR in ./src/pages/ui-kit/ui-forms/ui-forms.scss 8:36-98
Module not found: Error: Can't resolve '../../fonts/Montserrat-Regular.svg' in 'C:\Users\Andrey\Codeing\metalamp2\project-metalamp2\src\pages\ui-kit\ui-forms'
 @ ./src/pages/ui-kit/ui-forms/ui-forms.pug 1:216-318

ERROR in ./src/pages/ui-kit/ui-forms/ui-forms.scss 9:36-95
Module not found: Error: Can't resolve '../../fonts/Montserrat-Bold.eot' in 'C:\Users\Andrey\Codeing\metalamp2\project-metalamp2\src\pages\ui-kit\ui-forms'
 @ ./src/pages/ui-kit/ui-forms/ui-forms.pug 1:216-318

ERROR in ./src/pages/ui-kit/ui-forms/ui-forms.scss 10:36-96
Module not found: Error: Can't resolve '../../fonts/Montserrat-Bold.woff' in 'C:\Users\Andrey\Codeing\metalamp2\project-metalamp2\src\pages\ui-kit\ui-forms'
 @ ./src/pages/ui-kit/ui-forms/ui-forms.pug 1:216-318

ERROR in ./src/pages/ui-kit/ui-forms/ui-forms.scss 11:36-95
Module not found: Error: Can't resolve '../../fonts/Montserrat-Bold.ttf' in 'C:\Users\Andrey\Codeing\metalamp2\project-metalamp2\src\pages\ui-kit\ui-forms'
 @ ./src/pages/ui-kit/ui-forms/ui-forms.pug 1:216-318

ERROR in ./src/pages/ui-kit/ui-forms/ui-forms.scss 12:36-95
Module not found: Error: Can't resolve '../../fonts/Montserrat-Bold.svg' in 'C:\Users\Andrey\Codeing\metalamp2\project-metalamp2\src\pages\ui-kit\ui-forms'
 @ ./src/pages/ui-kit/ui-forms/ui-forms.pug 1:216-318

ERROR in [entry] [initial]
[pug-plugin] Can't resolve the file ../../fonts/Montserrat-Regular.eot

8 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.68.0 compiled with 9 errors in 4586 ms

from pug-plugin.

webdiscus avatar webdiscus commented on June 7, 2024

Hm, I've also noticed that on Windows, sometimes it fails some tests at first start, but passes everything on next runs.
All test on maOS are passed stabile always.

Can you reproduce the problem on Linux (in Docker)?

from pug-plugin.

AndreyGudin avatar AndreyGudin commented on June 7, 2024

Sorry, I don't have a Linux. If I can reproduce it on Windows, I'll create a new issue.

from pug-plugin.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.