zoukankan      html  css  js  c++  java
  • 【style-resources-loader】自动化导入CSS

    项目开发过程中我们可能会定义一些公共样式、变量、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{
         $sideBarWidth; // 这里直接使用定义的$sideBarWidth变量,无需引入scss
      }
    </style>
    
  • 相关阅读:
    SOG Tactical Tomahawk F01T 飞虎
    90 压缩干粮 飞虎
    美国陆军国民警卫队不锈钢水瓶 ACU色 飞虎
    CentOS安装RabbitMQ
    如何将EXCEL表中的数据导入数据库中
    Silverlight中的WattingDialog
    WPF ProgressDialog
    DataGrid小扩展
    WPF报表控件
    Misc另外一个世界
  • 原文地址:https://www.cnblogs.com/huiwenhua/p/13254129.html
Copyright © 2011-2022 走看看