scss或less嵌套写法样式不生效问题

一般我们在写项目时，不管是原生的css去写还是通过less/sass预处理器去处理，都习惯性的根据不同的功能模块等去对应相应的样式文件，最后统一在一个地方引入，例如：common.scss文件@import './reset.scss';@import './header.scss';@import './nav.scss';@import './login.scss';/*登录*/@import

987860960

4743人浏览 · 2020-12-04 14:53:06

987860960 · 2020-12-04 14:53:06 发布

一般我们在写项目时，不管是原生的css去写还是通过less/sass预处理器去处理，都习惯性的根据不同的功能模块等去对应相应的样式文件，最后统一在一个地方引入，例如：

在这里插入图片描述
common.scss文件

@import './reset.scss';
@import './header.scss';
@import './nav.scss';
@import './login.scss';/*登录*/
@import './systemuser.scss'; /* 用户管理*/

最后在app.vue文件中引入common.scss文件，这时候问题出现了

通过import方式引入css出现失效问题

<style lang="sass" >
  @import url(./assets/css/common.scss);
</style>

解决方案：

<style lang="sass"  src="./assets/css/common.scss"></style>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^