The manualInject option doesn't seem to work #40

stigvanbrabant · 2019-08-05T13:40:16Z

I'm having trouble using the manualInject option for the vue-style-loader while using vue cli 3.

Do you want to request a feature or report a bug?
bug

What is the current behavior?
Styling keeps automaticly injecting the styling into the DOM

If the current behavior is a bug, please provide the steps to reproduce.

Here is my vue.config.js:

module.exports = {
  parallel: true,
  productionSourceMap: false,
  chainWebpack: (config) => {
    config.resolve.symlinks(false);

    ['vue-modules', 'vue', 'normal-modules', 'normal'].forEach((type) => {
      config.module.rule('scss').oneOf(type).use('vue-style-loader').tap((opt) => {
        opt.manualInject = true;
        return opt;
      });

      config.module.rule('sass').oneOf(type).use('vue-style-loader').tap((opt) => {
        opt.manualInject = true;
        return opt;
      });

      config.module.rule('css').oneOf(type).use('vue-style-loader').tap((opt) => {
        opt.manualInject = true;
        return opt;
      });
    });
  },
};

Inside my main.js

The import:

import styling from './assets/scss/global.scss';

The injection inside my mounting function:

if (styling && styling.__inject__) {
  styling.__inject__();
}

What is the expected behavior?

Ability to manually inject styling by using styling.__inject__().

Please mention other relevant information such as your webpack version, Node.js version and Operating System.

Node version: v10.16.0
OS: Mac OS 10.16.6
Webpack: 4.28.4

The text was updated successfully, but these errors were encountered:

luxel · 2020-03-29T14:55:06Z

+1 the same issue.

We just used a workaround:

chainWebpack: (config) => {
    // exclude .lazy.css files from default css rules
    config.module.rule('css').exclude.store = [/\.lazy\.css$/]
    config.module
      .rule('lazy-css')
      .test(/\.lazy\.css$/)
      .use('vue-style-loader')
      .loader('vue-style-loader')
      .tap((opt) => {
        if (!opt) {
          opt = { sourceMap: false }
        }
        // turn on shadowMode, so all .lazy.csswill only take effect when __inject__ is called
        opt.shadowMode = true
        return opt
      })
      .end()
      .use('css-loader')
      .loader('css-loader')
      .tap((opt) => {
        if (!opt) {
          opt = { sourceMap: false,
            importLoaders: 2 }
        }
        return opt
      })
      .end()
      .use('postcss-loader')
      .loader('postcss-loader')
      .tap((opt) => {
        if (!opt) {
          opt = { sourceMap: false }
        }
        return opt
      })
      .end()
  }

And in our .vue code, we do this:

import styles from '../assets/field/element-ui/theme/index.lazy.css'
if (styles.__inject__) {
      styles.__inject__(document.body)
    }

Sporradik mentioned this issue Jan 28, 2020

Duplicated CSS rules in production Akryum/vue-cli-plugin-ssr#46

Open

vuejs / vue-style-loader

The manualInject option doesn't seem to work #40

The manualInject option doesn't seem to work #40

stigvanbrabant commented Aug 5, 2019

luxel commented Mar 29, 2020 •

edited

vuejs / vue-style-loader

The manualInject option doesn't seem to work #40

The manualInject option doesn't seem to work #40

Comments

stigvanbrabant commented Aug 5, 2019

luxel commented Mar 29, 2020 • edited

luxel commented Mar 29, 2020 •

edited