scss中webpack不打包@import url()引入的scss解决方案

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_37064409/article/details/83182105

解决方案

1.先讲解决方案

将

@import url("./**.scss") ;

改为

@import "./**.css";

原因

• 共同点：

1. 首先这两种引用方式都是从其他样式表导入样式规则到当前样式表中。

• 不同点：
  @import url 是css的语法规则

@import [ < string > | < url > ] [ < media-query-list > ]?

-- 用法举例
@import 'custom.css';
@import url("chrome://communicator/skin/");

@import “” 是scss加强过的特有规则

Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。

结论

1. import url() 为css语法在webpack对scss语法解析的时候会忽略本身为css的语法规则，只会对引用进来的scss文件进行css-loader打包，但不会进行sass-loader处理
2. import “” 为scss语法，允许导入scss或者sass语法文件，所以webpack会对其进行sass-loader解析

• 处理前
  

• 处理后
  

webpack配置文件

参考链接-官方文档

sass 官方文档
https://www.sass.hk/docs/

MDN @import url() 文档
https://developer.mozilla.org/zh-CN/docs/Web/CSS/@import

下次有人问你两者区别你就可以解释了！