Does not inject css - always does page refresh

[Daweo93]

Hello, I have issue with injectingCss using browser-sync with generateHtmlPlugins. I've read other issues and I suppose that full page is refreshed because every time when I save sass file HTML files are emmited.

Is there any know workaround for that?

Thanks

[malinbranduse]

Hey @Daweo93 If indeed html files are emitted while saving sass, something off. could you share more details? your configs, workflow, what you're building etc.

[Daweo93]

Hey @malinushj , I'm want to build webpack starter for building static pages which will compile pug, sass and load assets.

Here is my webpack congif file:

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const HTMLWebpackPlugin = require('html-webpack-plugin');

const generateHtmlPlugins = new HTMLWebpackPlugin({
  filename: `templates/index.html`,
  template: path.resolve(__dirname, `../src/html/index.pug`),
  publicPath: '/'
});

const config = {
  srcFolderName: 'src',
  outputFolderName: 'dist'
};

const extractCss = new ExtractTextPlugin({
  filename: 'css/[name].css',
  allChunks: true,
  disable: process.env.NODE_ENV === 'development'
});

const browserSync = new BrowserSyncPlugin(
  {
    host: 'localhost',
    port: 3000,
    server: {
      baseDir: ['dist/']
    },
    startPath: 'templates'
  },
  {
    injectCss: true
  }
);

const cleanDist = new CleanWebpackPlugin(
  [
    `${config.outputFolderName}/css`,
    `${config.outputFolderName}/js`,
    `${config.outputFolderName}/img`,
    `${config.outputFolderName}/fonts`,
    `${config.outputFolderName}/templates`
  ],
  {
    root: path.resolve(__dirname, '../')
  }
);

module.exports = {
  entry: {
    main: `./${config.srcFolderName}/js/index.js`
  },
  output: {
    filename: 'js/[name].js',
    path: path.resolve(__dirname, `../${config.outputFolderName}`),
    publicPath: '../'
  },
  mode: 'development',
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.(css|sass|scss)$/,
        use: extractCss.extract({
          use: [
            {
              loader: 'css-loader'
            },
            {
              loader: 'sass-loader'
            }
          ],
          fallback: 'style-loader'
        })
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              publicPath: '../img',
              outputPath: '/img'
            }
          }
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: '/fonts',
              publicPath: '../fonts'
            }
          }
        ]
      },
      {
        test: /\.pug$/,
        use: [
          {
            loader: 'pug-loader',
            options: {
              pretty: true
            }
          }
        ]
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader'
          }
        ]
      }
    ]
  },
  plugins: [extractCss, cleanDist, browserSync, generateHtmlPlugins]
};

Here are my dependencies from package.json

    "browser-sync": "^2.23.7",
    "browser-sync-webpack-plugin": "^2.2.2",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.11",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.8.3",
    "pug": "^2.0.3",
    "pug-html-loader": "^1.1.5",
    "pug-loader": "^2.4.0",
    "sass-loader": "^7.0.1",
    "style-loader": "^0.21.0",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15",
    "webpack-dev-server": "^3.1.3",
    "webpack-merge": "^4.1.2"
  },

With configuration above every time browser sync refresh the page after editing sass files.

[Va1]

may be resolved by the linked PR. for it to merge, there must be an extensive testing performed. if you want to volunteer – please, go ahead and read my comment in PR and this thread – https://github.com/Va1/browser-sync-webpack-plugin/issues/78

cheers