개발 중 vue 웹 구성 요소에 스타일링이 적용되지 않음

개발 중 vue 웹 구성 요소에 스타일링이 적용되지 않음

Vue 웹 컴포넌트를 개발하는 동안style웹 컴포넌트에는 적용되지 않지만head를 참조해 주세요.즉, 섀도우 DOM에서는 스타일이 무시됩니다.웹 컴포넌트를 main.js로 랩하는 방법은 다음과 같습니다.

import Vue from 'vue';
import wrap from '@vue/web-component-wrapper';
import MyWebComponent from './components/MyWebComponent';

const WrappedElement = wrap(Vue, MyWebComponent);

window.customElements.define('my-web-component', WrappedElement);

다시 말하지만 스타일 태그 내의 CSS 규칙은 활성화되지 않습니다.

생산용으로 빌드하면 웹 컴포넌트에 스타일이 추가됩니다.다음 명령을 사용하여 포장을 수행합니다.

vue-cli-service build  --target wc --name my-web-component ./src/components/MyWebComponent.vue

같은 일을 할 수 있는 방법이 있을까요?vue-cli-service serve?

편집: 예: 여기: https://github.com/snirp/vue-web-component

edit2: 제 문제는 이 문제와 밀접한 관련이 있는 것 같습니다.회피책을 이해할 수 없기 때문에, 보다 기본적인 해결책을 중시합니다.

링크된 GitHub 문제에 따라 해결 방법은 에서 옵션을 설정하는 것입니다.vue-style-loader.shadowMode이falseVue CLI 프로젝트에서는 디폴트로 설정되어 있습니다만, 에서 조정할 수 있습니다.

먼저 웹 팩 구성을 검사하여 변경할 로더를 결정합니다.

# run at project root
vue inspect

이 명령어 출력에는 다음과 같은 몇 가지 로더 설정이 표시됩니다.shadowMode: false:

/* config.module.rule('css') */
{
  test: /\.css$/,
  oneOf: [
    /* config.module.rule('css').oneOf('vue-modules') */
    {
      resourceQuery: /module/,
      use: [
        /* config.module.rule('css').oneOf('vue-modules').use('vue-style-loader') */
        {
          loader: 'vue-style-loader',
          options: {
            sourceMap: false,
            shadowMode: false  // <---
          }
        },
        /* ... */
      ]
    },
    /* ... */

웹 팩 로더 구성의 전체 목록shadowMode: false:

config.module.rule('vue').use('vue-loader')
config.module.rule('css').oneOf('vue-modules').use('vue-style-loader')
config.module.rule('css').oneOf('vue').use('vue-style-loader')
config.module.rule('css').oneOf('normal-modules').use('vue-style-loader')
config.module.rule('css').oneOf('normal').use('vue-style-loader')
config.module.rule('postcss').oneOf('vue-modules').use('vue-style-loader')
config.module.rule('postcss').oneOf('vue').use('vue-style-loader')
config.module.rule('postcss').oneOf('normal-modules').use('vue-style-loader')
config.module.rule('postcss').oneOf('normal').use('vue-style-loader')
config.module.rule('scss').oneOf('vue-modules').use('vue-style-loader')
config.module.rule('scss').oneOf('vue').use('vue-style-loader')
config.module.rule('scss').oneOf('normal-modules').use('vue-style-loader')
config.module.rule('scss').oneOf('normal').use('vue-style-loader')
config.module.rule('sass').oneOf('vue-modules').use('vue-style-loader')
config.module.rule('sass').oneOf('vue').use('vue-style-loader')
config.module.rule('sass').oneOf('normal-modules').use('vue-style-loader')
config.module.rule('sass').oneOf('normal').use('vue-style-loader')
config.module.rule('less').oneOf('vue-modules').use('vue-style-loader')
config.module.rule('less').oneOf('vue').use('vue-style-loader')
config.module.rule('less').oneOf('normal-modules').use('vue-style-loader')
config.module.rule('less').oneOf('normal').use('vue-style-loader')
config.module.rule('stylus').oneOf('vue-modules').use('vue-style-loader')
config.module.rule('stylus').oneOf('vue').use('vue-style-loader')
config.module.rule('stylus').oneOf('normal-modules').use('vue-style-loader')
config.module.rule('stylus').oneOf('normal').use('vue-style-loader')

그래서 세팅할 수 있다shadowMode: true의 설정에 대해서vue.config.js다음 토막과 함께:

function enableShadowCss(config) {
  const configs = [
    config.module.rule('vue').use('vue-loader'),
    config.module.rule('css').oneOf('vue-modules').use('vue-style-loader'),
    config.module.rule('css').oneOf('vue').use('vue-style-loader'),
    config.module.rule('css').oneOf('normal-modules').use('vue-style-loader'),
    config.module.rule('css').oneOf('normal').use('vue-style-loader'),
    config.module.rule('postcss').oneOf('vue-modules').use('vue-style-loader'),
    config.module.rule('postcss').oneOf('vue').use('vue-style-loader'),
    config.module.rule('postcss').oneOf('normal-modules').use('vue-style-loader'),
    config.module.rule('postcss').oneOf('normal').use('vue-style-loader'),
    config.module.rule('scss').oneOf('vue-modules').use('vue-style-loader'),
    config.module.rule('scss').oneOf('vue').use('vue-style-loader'),
    config.module.rule('scss').oneOf('normal-modules').use('vue-style-loader'),
    config.module.rule('scss').oneOf('normal').use('vue-style-loader'),
    config.module.rule('sass').oneOf('vue-modules').use('vue-style-loader'),
    config.module.rule('sass').oneOf('vue').use('vue-style-loader'),
    config.module.rule('sass').oneOf('normal-modules').use('vue-style-loader'),
    config.module.rule('sass').oneOf('normal').use('vue-style-loader'),
    config.module.rule('less').oneOf('vue-modules').use('vue-style-loader'),
    config.module.rule('less').oneOf('vue').use('vue-style-loader'),
    config.module.rule('less').oneOf('normal-modules').use('vue-style-loader'),
    config.module.rule('less').oneOf('normal').use('vue-style-loader'),
    config.module.rule('stylus').oneOf('vue-modules').use('vue-style-loader'),
    config.module.rule('stylus').oneOf('vue').use('vue-style-loader'),
    config.module.rule('stylus').oneOf('normal-modules').use('vue-style-loader'),
    config.module.rule('stylus').oneOf('normal').use('vue-style-loader'),
  ];
  configs.forEach(c => c.tap(options => {
    options.shadowMode = true;
    return options;
  }));
}

module.exports = {
  // https://cli.vuejs.org/guide/webpack.html#chaining-advanced
  chainWebpack: config => {
    enableShadowCss(config);
  }
}

작성 중<projectroot>/vue.config.js위의 스니펫을 사용하여 프로젝트에서 섀도 CSS를 개발 모드로 활성화합니다.https://github.com/snirp/vue-web-component/pull/1 를 참조해 주세요.

언급URL : https://stackoverflow.com/questions/53431754/styling-not-applied-to-vue-web-component-during-development