webpack4导入全局sass文件

场景

当我们在scss样式文件中想使用其他已经声明好的scss变量文件，通常会这么做：

//index.scss
@import "minix.scss";body {color: $theme-color;
}

随着项目越来越大，每个样式文件都需要用到全局定义好的变量，这时就变得非常的笨重，弊端就暴露出来了

那么我们如何在react项目中解决这个问题呢

安装

安装sass-resouces-loader
npm i sass-resources-loader -D

这个加载器将@import您的SASS资源放入每个requiredSASS模块中。因此，您可以在所有SASS样式中使用共享变量和mixin，而无需在每个文件中手动导入它们。使用CSS模块！

使用

module: {rules: [...{test: /\.(css|scss)$/,use: [MiniCssExtractPlugin.loader,{loader: 'css-loader'},{loader: 'postcss-loader',options: {plugins: () => [require('autoprefixer')],sourceMap: true}},{loader: 'sass-loader',options: {sourceMap: true}},{loader: 'sass-resources-loader',options: {resources: ['./skin/mixin.scss', './skin/base.scss']}}],exclude: path.resolve(__dirname, 'node_modules')}]
},

webpack4导入全局sass文件相关推荐

xcode6如何导入全局头文件
如题,之前Xcode5的话是在prefix文件内import一次,就可以全局使用了,xcode6取消了prefix文件,替代的方法是什么呢? 没有什么替代方法,可能是苹果出于对项目构建或其他优化的考虑 ...
css文件如何设置scss,在SCSS文件中导入常规CSS文件？
回答(14) 3 years ago 截至撰写本文时,看起来这是未实现的: https://github.com/sass/sass/issues/193 对于libsass(C / C实现),导入对 ...
vue-cli3项目中全局引入less sass文件以及使用本地图片在不同地方规则
第一种直接在main.js中引入,需要声明loader demo: import '!style-loader!css-loader!less-loader!./assets/css/common.l ...
cmd导入oracle库文件,cmd 导入oracle数据库
从服务器将Oracle数据库导出到本地Oracle数据库的方法原文:从服务器将Oracle数据库导出到本地Oracle数据库的方法 1.将服务器上的Oracle数据库导入到本地在CMD模式下执 ...
在SCSS文件中导入常规CSS文件？
本文翻译自:Import regular CSS file in SCSS file? Is there anyway to import a regular CSS file with Sass's ...
Oracle数据库中正确的导入dmp数据库文件
其实在Oracle数据导入与导出imp/exp的实际操作和Oracle数据还原和备份的实际操作很相似.我们大家都知道exp命令可以把相关的数据从远程Oracle数据库的服务器导出到本地的dmp文件,i ...
ThinkPhp 使用PhpExcel导出导入多语言文件
在ThinkPHP 里已经实现了多语言功能,只要在指定的目录下创建对应的语言文件并填充内容,即可实现多语言功能而多语言的翻译却是一个很麻烦的事情,因为客户特定的行业问题导致我们翻译可能是不准确的于 ...
sass文件编译的三种方式【舒】
[舒:]sass文件编译的三种方式方式一: 1.webstorm打开evtGulp项目或者mcake-activity项目 2.中,开启gulp->default/develop,启动watc ...
效率最高的Excel数据导入---（c#调用SSIS Package将数据库数据导入到Excel文件中【附源代码下载】）...
本文目录: (一)背景 (二)数据库数据导入到Excel的方法比较 (三)SSIS的简介 (四)数据库中存储过程示例(SSIS应用需要) (五)Excel模板的制作(这步这么简单,稍微介 ...

webpack4导入全局sass文件

场景

安装

使用

webpack4导入全局sass文件相关推荐

最新文章

热门文章