webpack/webpack

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

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?

Gregory Danko

@g-style

@johnmarinelli I have found a solution. Actually there is an option for this: output.chunkFilename. So I set it to [name].[chunkhash].js and it works like a charm. Thank you anyway :)

Rob

@rm-rf-etc

@johnmarinelli thanks, that helped a bit. I have a better sense of the problem now but I'm not sure why this is happening. When I try to run a build process that isolates what I'm trying to build, it seems that webpack tries to import files that don't exist and I didn't ask it to import. Here's the error output.

ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/rchristian/Company/assets'
resolve './src' in '/Users/rchristian/Company/assets'
    using description file: /Users/rchristian/Company/assets/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/rchristian/Company/assets/package.json (relative path: ./src)
        no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/rchristian/Company/assets/src is not a file
        .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /Users/rchristian/Company/assets/src.wasm doesn't exist
        .mjs
        Field 'browser' doesn't contain a valid alias configuration
        /Users/rchristian/Company/assets/src.mjs doesn't exist
        .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/rchristian/Company/assets/src.js doesn't exist
        .json
        Field 'browser' doesn't contain a valid alias configuration
        /Users/rchristian/Company/assets/src.json doesn't exist
        as directory
        existing directory
            using path: /Users/rchristian/Company/assets/src/index
            using description file: /Users/rchristian/Company/assets/package.json (relative path: ./src/index)
                no extension
                Field 'browser' doesn't contain a valid alias configuration
                /Users/rchristian/Company/assets/src/index doesn't exist
                .wasm
                Field 'browser' doesn't contain a valid alias configuration
                /Users/rchristian/Company/assets/src/index.wasm doesn't exist
                .mjs
                Field 'browser' doesn't contain a valid alias configuration
                /Users/rchristian/Company/assets/src/index.mjs doesn't exist
                .js
                Field 'browser' doesn't contain a valid alias configuration
                /Users/rchristian/Company/assets/src/index.js doesn't exist
                .json
                Field 'browser' doesn't contain a valid alias configuration
                /Users/rchristian/Company/assets/src/index.json doesn't exist

{
    mode: 'production',
    module: {
        rules: [{
            test: /\.s[ac]ss$/i,
            use: ['sass-loader'],
        }],
    },
}

ivan-vilches

@ivan-vilches

hello folks

i am looking for the chats for webpack community , is this active?

Rob

@rm-rf-etc

Why would sass-loader output a main.js file?

{
    mode: 'production',
    entry: [
        path.join(__dirname, './src/stylesheets/postcss.scss'),
        path.join(__dirname, './src/stylesheets/google_fonts.scss'),
    ],
    output: {
        path: path.join(__dirname, './dist/stylesheets'),
        publicPath: './dist/stylesheets',
    },
    plugins: [
        new CopyPlugin([{
            from: 'src/images/',
            to: path.join(__dirname, './dist/images/'),
        }, {
            from: 'src/fonts/',
            to: path.join(__dirname, './dist/fonts/'),
        }]),
    ],
    module: {
        rules: [{
            test: /\.s[ac]ss$/i,
            use: [
                'css-loader',
                'sass-loader',
            ],
        }],
    },
}

dist/stylesheets/main.js -> contents look like minified CSS

Rob

@rm-rf-etc

So, after adding filename: 'styles.css',, the file is suddenly readable (indented correctly), and I can see webpack bundler code, plus stuff...

/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {

exports = module.exports = __webpack_require__(0)(false);
// Module
exports.push([module.i, "/*!\n *  Font Awesome 4.4.0 by @davegandy ...

How do I get sass to compile to a regular css file?

Rob

@rm-rf-etc

Found something. "It is not trivial to compile an SCSS file with Webpack, which is not included in the JS file, into its own CSS file. This post shows you how to do that." https://florianbrinkmann.com/en/sass-webpack-4240/

Obviously it should be trivial

Charles Guo

@CharlesGC

hello

Egor Baranov

@goganchic

Hello!

I'm exploring source codes of webpack and mini-css-extract-plugin and I have a question: why two different structures Dependency and Module were introduced? Why Module structure is not enough? If I'm not mistaken Dependency has only information about what should be built and Module has all algorithms about building, caching and so on. Am I correct? In this case in mini-css-extract-plugin CssDependency looks a bit strange, because it does all receives prepared contents from loader and CssModule only exposes prebuilt sources.

harshit786

@harshit786

Hello we are getting problem while running webpack

https://imgur.com/a/i482fBI

The changes in the src folder of main.scss

we are changing but nothing reflects

please help us out

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

harshit786

@harshit786

Could you provide the path where the files are running ?

Is there anybody?

harshit786

@harshit786

Please reply anybody I am stucking from three days

harshit786

@harshit786

😞

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

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?

Where communities thrive

People

Repo info

Activity