Question

我正在编写一个vue应用程序，该应用程序将在此容器中的“传统”服务器渲染网站上的页面内呈现：

<div id="account-summary-container"></div>

在本地开发时，效果很好。但是，当在网站环境中运行时，会发生很多样式冲突，因为我的应用程序和网站的样式都是全局的。我的应用在整个网站上搞砸了样式。

如何将应用程序中的所有样式的范围限定为应用程序所呈现的选择器的本地样式？

我的应用使用了css-loader加载的bootstrap 4样式。

我有这样的webpack.config.js入口点：

entry: {
  app: ["./src/scss/styles.scss", "./src/app.js"]
},

和styles.scss如下：

@import '~bootstrap/scss/bootstrap';
@import '../css/feather.min.css';
@import '../css/icomoon-spinners.css';
@import url('https://fonts.googleapis.com/css?family=Maven+Pro:400,500,700,900');
@import 'helpers/variables';
@import 'helpers/mixins';
@import 'helpers/placeholders';
...

我以为css-modules可能是答案，但是我不知道如何告诉css-loader将所有样式都设为#account-summary-container本地化。我在styles.scss中尝试过：

:local(#account-summary-container) {
  composes: "~bootstrap/scss/bootstrap";
  composes: "../css/feather.min.css";
  ...
}

它嘲笑我la脚的尝试：

Error: composition is only allowed when selector is single :local class name not in ":local(#account-summary-container)", "#account-summary-container" is weird

我想知道自己是否完全错误。我希望不必对样式进行大量重写。

Answer 1

要仅定位Vue实例内部的组件，必须使用scoped styles。这很痛苦，因为您不能将css放在“主” App.vue文件上，并让所有子项继承它-您必须在需要的每个组件上使用scoped styles它，这可能会导致请求数量超出您的期望。

作为一个例子（我测试了它，它应该可以工作）。

<template>
    <!--
      VUE/COMPONENT TEMPLATE
    -->
</template>

<script>
  export default {
    /* ***********************
         VUE/COMPONENT CODE
       *********************** */
  };
</script>

<!-- 
*********************************************************
***** SCOPE CSS PER COMPONENT ****************************
***** IMPORT VIA 'src="./path/to/cssfile.css"' ***********
**********************************************************
--> 
<style scoped src="../css/style.css">

</style>

Answer 2

找到了answer。很简单应该有一个V8（低音）。

.pony {
    @import 'sub';
    font-size: 100px;
}

webpack：在vue应用选择器下对所有SCSS进行作用域

2 个答案: