Sass @import 重复问题
2016-05-09 11:31:11 更新
这个重复问题是由于 Sass 本身造成的,见: https://github.com/sass/sass/issues/139。
Sass 目前 @import
的实现机制类似于 include
文件包含,
所以导致 @import
的模块在 CSS 输出中重复出现,而不是理想中的 require
模块加载。
Issue 中提到 Sass 4.x 会修复这个问题。
————————– 分割线 ————————–
使用 vue-cli
执行 vue init webpack vue-project
创建一个 Vue
项目,
如果使用了 <style lang="scss">
,
并在很多组件的 <style>
标签内都 @imoprt
同一个 Sass
文件,
就会导致打包出来的 CSS
文件很大,因为所有引入的 Sass
文件都被重复打包了。
vue-loader
作者在 issues
里回答了这个问题,
Duplicate import problem with sass。
我试图使用 webpack
的 CommonsChunkPlugin
插件抽离出公共的 CSS
部分,
作为 vendor.[hash].css
用来全局共享,但是效果不尽人意,
因为 vue-loder
是以组件为基本单位解析 <style lang="scss">
标签的,
如果 index.vue
组件引入了 base.scss
,
并且 index.vue
的子组件也引入了 base.scss
,
那么 base.scss
就会被包含两次输出到最终的 css
文件里。
解决方法是,不要重复引用 scss
文件,
如果要重复引用,也只引用抽象的 scss
文件,
比如 functions.scss
、variable.scss
、minxinx.scss
这些不会污染输出的 scss
文件。
或者参考作者在 issue
里的解决方案,用 cssnano
把 css
中重复的规则去掉。