webpack/webpack

For questions please post on Stack Overflow and use the 'webpack' tag (http://stackoverflow.com/tags/webpack).

Rogan Louwrens

@hallucinarium

@harshit786 Have you tried importing into index.js (or whatever your entry point is)?

One of my CSS imports via webpack is into index.js is import "./assets/css/base.css";

Tiago Martinho

@tiagosmartinho

hello,

I am trying to load the fonts through vue.config.js. However I am not getting it.

scss

@include font-face(Lato, '/fonts/lato/latoThin', 100, normal, eot woff2 woff svg ttf);

vue.config.js

     ....
     rules: [{
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: [{
                    loader: 'file-loader',

                    options: {
                        name: 'lato/[name].[ext]',
                        outputPath: 'fonts/'
                    }
                }]
            },

if I remove the first slash from the source path, fonts/lato/latoThin it loads the fonts, but in compile this error appears

* ./fonts/lato/latoThin.eot? in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-3-1!./node_modules/postcss-loader/src??ref--8-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-3-3!./node_module s/resolve-url-loader!./src/styles/global.scss

and put the bar back in the font path and it works - /fonts/lato/latoThin

Any solution?

Rogan Louwrens

@hallucinarium

Have you tried using the url-loader?

Alternatively, try './fonts/lato/latoThin'

Tiago Martinho

@tiagosmartinho

Alternatively, try './fonts/lato/latoThin'

already tried this way

Have you tried using the url-loader?

Not yet, I'll try

harshit786

@harshit786

Encore.addStyleEntry('styles.min', './src/css/main.scss');

/**
 * JavaScript Entry Point
 */
Encore.addEntry('main.min', './src/js/main.js');

@ Rogan

these two files

Rogan Louwrens

@hallucinarium

@harshit786 Which framework are you using?

harshit786

@harshit786

This is simple

html files

webpack is running through scripts package.json

Here at stack also we have added the problem

https://stackoverflow.com/questions/57986311/webpack-src-files-changes-are-not-reflecting-not-showing-the-path

even after deleting main.scss

still it is loading on web browser

Rogan Louwrens

@hallucinarium

Hmm, I haven't used webpack-encore before.

Can you try doing an ES6-style import of your stylesheets in your main JS file?

John Marinelli

@johnmarinelli

@rm-rf-etc i would also consider splitting the rule into 2 separate rules; so test for css and sass files and use different loaders independently, instead of checking for both using a regex and using both loaders

i've seen problems when using multiple loaders on 1 file

harshit786

@harshit786

@hallucinarium could you provide an example

regarding ES6-style import of your stylesheets in your main JS file?

deAtog

@deAtog

@harshit786 Encore.addEntry and Encore.addStyleEntry both do the same thing. To be honest, I'm not sure why Encore separated the two unless it was for historical reasons?

deAtog

@deAtog

@harshit786 I'm confused about the issue you are trying to solve.. how are you running Webpack?

harshit786

@harshit786

I am running pages/home.html directly

https://imgur.com/a/c7qCt3z

is my directory structure

https://imgur.com/a/bFgqBzh

is the pages and I am running directly is it something wrong I am doing as I am novoice to webpack

now in the src folder I do changes in main.scss nothing

happened

harshit786

@harshit786

Here is the main.scss

https://imgur.com/a/QihqtFf

deAtog

@deAtog

@harshit786 what are you using to serve your files? Webpack's dev server?

harshit786

@harshit786

I am trying to rebuild webpack but it is not working

we are running directly

https://imgur.com/a/amNNd0G

just like putting in xampp server

deAtog

@deAtog

Ah.. well there you go..

@harshit786 I suspect your issue is not webpack, but Apache on Windows.

harshit786

@harshit786

I think scripts are

running

in package.json

Runnning without apache

still does not solve problem

Rogan Louwrens

@hallucinarium

@deAtog Any chance you know how to get the hashed filename of a font imported in a CSS file?

I know with image imports in a JS file the import returns the path. I just have no idea how that translates to something imported in a CSS file.

deAtog

@deAtog

@urbanmichal Admittedly, about a week after I started learning how to configure Webpack.. I switched to using Encore as it does almost everything I needed. That said, if memory serves me right, I think you may have to use the url-loader along with your other CSS loaders to fix paths in CSS.

John Marinelli

@johnmarinelli

@deAtog we also use Symfony + Webpack, but not Encore. i am wondering, how has your experience been? is your project large?

Where communities thrive

People

Repo info

Activity