vue 全局使用scss 变量

野性酷女 2022-01-12 03:09 1047阅读 0赞

1.安装scss

npm install --save-dev sass-loader
    //sass-loader依赖于node-sass
    npm install --save-dev node-sass复制代码

2.安装sass-resources-loader

npm install --save-dev sass-resources-loader复制代码

3.修改配置

在 build 文件夹下找到 `util.js` 修改sass编译器loader的配置，直接把下面的代码复制进去

function resolveResouce(name) {
    		return path.resolve(__dirname, '../src/assets/css/' + name);//更换为自己的路径
    	}
    
    	function generateSassResourceLoader() {
    		var loaders = [
    			cssLoader,
    			// 'postcss-loader',
    			'sass-loader',
    			{
    				loader: 'sass-resources-loader',
    				options: {
    					// 换为自己的scss文件名
    					resources: [resolveResouce('style.scss')]
    				}
    			}
    		];
    		if (options.extract) {
    			return ExtractTextPlugin.extract({
    				use: loaders,
    				fallback: 'vue-style-loader'
    			})
    		} else {
    			return ['vue-style-loader'].concat(loaders)
    		}
    	}复制代码

将默认的sass配置改为 `generateSassResourceLoader()`

return {
    		css: generateLoaders(),
    		postcss: generateLoaders(),
    		less: generateLoaders('less'),
    		sass: generateSassResourceLoader(),
    		scss: generateSassResourceLoader(),
    		stylus: generateLoaders('stylus'),
    		styl: generateLoaders('stylus')
    	}复制代码

此时重启服务就可以使用了！

注意：

**1.scss文件的引入路径一定要写正确！！！**

**2.复制****generateSassResourceLoader和****resolveResource****这两个函数的时候，一定要放在exports.cssLoaders里面 不然会找不到****cssLoader**

转载于:https://juejin.im/post/5d0345996fb9a07f0c467e86

发表评论取消回复

表情：

评论列表（有 0 条评论，1047人围观）

还没有评论，来说两句吧...

相关阅读

相关全局scss

css: { loaderOptions: { sass: { prependData: ` @imp

快来打我*/ 2022年11月19日 04:29/ 0 赞/ 156 阅读

相关 vue 导入全局scss

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

比眉伴天荒/ 2022年11月04日 13:21/ 0 赞/ 171 阅读

相关 vite 添加scss全局变量

首先要先安装一下npm安装一下sass，然后再vite.config中修改配置 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdG

待我称王封你为后i/ 2022年10月07日 01:58/ 0 赞/ 521 阅读

相关 vue——scss变量全局使用

vue——scss变量全局使用 1.终端安装sass-resources-loader npm install sass-resources-loader

爱被打了一巴掌/ 2022年10月04日 15:42/ 0 赞/ 261 阅读

相关 vue 使用全局变量

vue 使用全局变量使用vue中的组件进行请求的时候免不了需要设置baseURL。但是这个baseURL最好不要写在某个全局的vue组件中。如果写到一个组件中的话，打包

缺乏、安全感/ 2022年06月08日 07:18/ 0 赞/ 229 阅读

相关 vue中全局使用scss

在vue中全局使用scss需要先安装 sass-resources-loader，使用npm install sass-resources-loader --save-dev

港控/mmm°/ 2022年05月08日 05:28/ 0 赞/ 321 阅读

相关 vue 配置sass、scss全局变量

下载vue项目下载vue项目就不多说了，大家既然搜索这个标题，肯定不差这一步依赖： 1.下载sass-resources-loader 执行npm/cnpm

旧城等待，/ 2022年03月07日 03:48/ 0 赞/ 321 阅读

相关 Vue-Cli 3 引入 SCSS 全局变量

首先创建一个全局变量文件 `global.scss` $theme-color: efefef; 复制代码编辑`vue.config.js`

以你之姓@/ 2022年01月19日 00:21/ 0 赞/ 566 阅读

相关 vue使用scss，并且全局引入公共scss样式

要如何在我们的vue项目中全局引入scss文件呢？ 1. `main.js`可以直接`import css`文件，而不可以直接`import scss`文件。 2. 在i

Myth丶恋晨/ 2022年01月17日 00:39/ 0 赞/ 724 阅读

相关 vue 全局使用scss 变量

1.安装scss npm install --save-dev sass-loader //sass-loader依赖于node-sass npm i

野性酷女/ 2022年01月12日 03:09/ 0 赞/ 1048 阅读