1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > vue+webpack5项目中全局引入scss

vue+webpack5项目中全局引入scss

时间:2019-01-15 11:23:51

相关推荐

vue+webpack5项目中全局引入scss

一,安装插件

npm i sass-resources-loader -D

二,修改wenpack的rule配置

//全局引入scss变量{test: /\.(css|scss|sass)$/,use: [!prodMode? 'style-loader': {loader: MiniCssExtractPlugin.loader,options: {publicPath: '../'}},'css-loader','postcss-loader','sass-loader',{loader: 'sass-resources-loader',options: {resources: ['src/style/_variables.scss' // 引入全局 SasS 变量的文件(对应你全局文件的路径)]}}]}

三,如果是vue-cli项目怎么办?

在vue.config.js中修改配置即可:

module.exports = {css: {loaderOptions: {scss: {prependData: `@import "@/style/tools/index.scss";@import "@/style/settings/var.scss";`// 引入全局 SasS 变量的文件(对应你全局文件的路径)},}}}

四,实现的效果:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。