【style-resources-loader】自动化导入CSS
2021-01-24 11:14
阅读：918
标签：lan asc install 模式 引用 web width table cli
项目开发过程中我们可能会定义一些公共样式、变量、mixin...,在任意单文件中可以随时自由的引用这些公共样式和变量，那么我们就可以使用style-resources-loader，这篇文章将介绍如何使用它。
一、预处理器安装
根据不同预处理器(Sass/Less/Stylus)，安装响应的webpack loader:
// Sass
npm install -D sass-loader sass
// Less
npm install -D less-loader less
// Stylus
npm install -D stylus-loader stylus
二、安装style-resources-loader
// 使用vue add安装
vue add style-resources-loader
三、配置vue.config.js
在pluginOptions>style-resources-loader定义资源的模式。配置项：
| 名称 | 类型 | 例如 |
|---|---|---|
| preProcessor | string | sass, scss, stylus, less中的一种 |
| patterns | string, array | 资源路径或者资源路径数组 |
四、案例
// vue.config.js
const path = require(‘path‘)
module.exports = {
pluginOptions: {
‘style-resources-loader‘: {
‘preProcessor‘: ‘scss‘, // 项目中使用scss
‘patterns‘: [
path.resolve(__dirname, ‘./src/styles/*.scss‘),
]
}
}
}
// src/styles/_variables.scss
$sideBarWidth: 180px;
$sideBarBackgroundColor:#2a2935;
$sideBarBorderColor:#1b1b22;
// 某vue文件
【style-resources-loader】自动化导入CSS
标签：lan asc install 模式 引用 web width table cli
原文地址：https://www.cnblogs.com/huiwenhua/p/13254129.html
文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：【style-resources-loader】自动化导入CSS
文章链接：http://soscw.com/essay/46294.html
文章标题：【style-resources-loader】自动化导入CSS
文章链接：http://soscw.com/essay/46294.html
评论
亲，登录后才可以留言！