Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Nov 17 19:12
    smelukov edited #9979
  • Nov 17 19:05
    sokra synchronize #7075
  • Nov 17 19:05

    sokra on npm_and_yarn

    (compare)

  • Nov 17 19:05

    sokra on master

    chore(deps-dev): bump eslint-co… Merge pull request #9982 from w… (compare)

  • Nov 17 19:05
    sokra closed #9982
  • Nov 17 19:04
    sokra synchronize #7075
  • Nov 17 19:04

    sokra on master

    chore(deps-dev): bump @types/no… Merge pull request #9981 from w… (compare)

  • Nov 17 19:04

    sokra on npm_and_yarn

    (compare)

  • Nov 17 19:04
    sokra closed #9981
  • Nov 17 16:52
    smelukov synchronize #9979
  • Nov 17 16:50
    webpack-bot unlabeled #9979
  • Nov 17 16:50
    webpack-bot labeled #9979
  • Nov 17 16:50
    smelukov synchronize #9979
  • Nov 17 01:03
    webpack-bot labeled #9982
  • Nov 17 00:49

    dependabot-preview[bot] on npm_and_yarn

    chore(deps-dev): bump eslint-co… (compare)

  • Nov 17 00:49
    webpack-bot labeled #9982
  • Nov 17 00:49
    dependabot-preview[bot] labeled #9982
  • Nov 17 00:49
    dependabot-preview[bot] opened #9982
  • Nov 15 20:23
    webpack-bot labeled #9981
  • Nov 15 20:09

    dependabot-preview[bot] on npm_and_yarn

    chore(deps-dev): bump @types/no… (compare)

Rob
@rm-rf-etc
{
    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
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
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

* ./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
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
is my directory structure
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