在Bootstrap3页面使用Bootstrap4功能时SCSS嵌套@import报错如何解决

报错原因 #

你当前使用的是Ruby Sass 3.4.23版本，该版本规则下，导入带.css后缀的文件时，会被识别为原生CSS的@import指令，而原生规范要求@import必须写在样式文件最顶层，不允许嵌套在选择器内部，因此触发报错。 #

可行解决办法 #

方法1：修改后缀重导入（成本最低） #

把你要导入的bootstrap4.min.css文件后缀改为.scss，Sass就会将其识别为Sass文件处理，允许嵌套导入，自动给内部所有选择器加上#plugged前缀，实现样式作用域隔离。
操作步骤：

1. 重命名Bootstrap4样式文件：
   mv bootstrap4.min.css bootstrap4.min.scss
2. 原有scss代码无需改动，直接编译即可：

#plugged {
  @import 'bootstrap4.min.scss';
}

方法2：升级到Dart Sass #

如果不想修改原文件后缀，可以将本地Sass替换为目前官方维护的Dart Sass版本，新版本支持在嵌套规则内导入CSS文件，只需在导入时添加css:前缀即可：

#plugged {
  @import 'css:bootstrap4.min.css';
}

注意事项 #

Bootstrap4的部分组件（模态框、下拉菜单、弹出提示等）的JS逻辑会默认把DOM元素插入到<body>尾部，不在你定义的#plugged容器内，会导致样式失效。可以通过修改Bootstrap4 JS的容器配置，把动态生成的元素指定插入到#plugged内部即可解决。

内容的提问来源于stack exchange，提问作者Dims