vue js模块中引入css文件 怎么限制作用域

Question

问题描述

vue js模块中引入css文件 怎么限制作用域

问题出现的环境背景及自己尝试过哪些方法

项目组件一般分为html模板，css，js三个文件，js分别引入前两者，webpack编译后生成的公共样式文件vender中使用标签选择器设置的样式会出现错乱

怎么解决这个问题？

附一张图，是某个页面开发者工具中的css编译后的公共样式

目录结构：
_

|_index.js
|_style.css
|_tmpl.html

index.js文件：

let style = require('./style.css')
if(style.locals) style = style.locals

export default {
    template,
    data() {
        return {
            style
        }
    },
}

Answer 1

建议一个页面一个id 所有的样式都在这个id下面写 推荐用less/sass 这样的好处是你可以修改第三方组件的样式。
scoped 也可以，但是修改第三方组件的时候，有些修改不了，只能再定义一个style，在里面修改， 麻烦的很。

Answer 2

scoped了解下: https://vue-loader.vuejs.org/...

Answer 3

同楼上，scoped

Answer 4

同楼上，scoped

Answer 5

在vue组件的mounted中书写条件语句使用import('cssPath') 即可满足需求。