Vue CLI：scoped样式

scoped样式

• 作用：让样式在局部生效，防止冲突
• 写法： 

  <style scoped>
  .demo {
    background: #000;
    height: 200px;
    color: #fff;
  }
  </style>

   

less-loader插件

Vue中的webpack并没有安装最新版，导致有些插件也不能默认安装最新版，如 npm i less-loader@7，而不是最新版

//查看当前webpack的版本
node_modules\webpack\package.json

//查看webpack 版本
npm view webpack versions
//安装 less-loader 插件
npm i less-loader@7

示例

src\components\Demo.vue

<template>
  <div class="demo">demo</div>
</template>
 
<style scoped>
.demo {
  background: #000;
  height: 200px;
  color: #fff;
}
</style>

src\components\HelloWorld.vue

<template>
  <div class="hello">HelloWorld</div>
</template>
 
<style>
.hello {
  background: #a92525;
  height: 200px;
  color: #fff;
}
</style>

src\App.vue

<template>
  <div id="app">
    APP
    <HelloWorld />
    <Demo />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import Demo from "./components/Demo.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
    Demo,
  },
};
</script>

<style>
#app {
  padding: 50px; 
  background: #5b5454;
  color: #fff;
}
</style>