码迷,mamicode.com
首页 > Web开发 > 详细

【style-resources-loader】自动化导入CSS

时间:2020-07-06 12:46:29      阅读:166      评论:0      收藏:0      [点我收藏+]

标签: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 lang=‘scss‘ scoped>
.sidebar-container{
    width: $sideBarWidth; // 这里直接使用定义的$sideBarWidth变量,无需引入scss
  }
</style>

【style-resources-loader】自动化导入CSS

标签:lan   asc   install   模式   引用   web   width   table   cli   

原文地址:https://www.cnblogs.com/huiwenhua/p/13254129.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!