欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue-cli配置全局sass、less變量的方法

 更新時(shí)間：2019年06月06日 11:18:27   作者：敏小靜  
這篇文章主要介紹了vue-cli配置全局sass、less變量的方法，本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

一、全局配置less

1.下載插件

**vue add style-resources-loader**
vue add pluginName 是vue-cli3提供的。vue add 是用yarn安裝插件的， yarn源的問題有可能導(dǎo)致失敗。如果上面安裝失敗的話，就分別安裝 style-resources-loader 和 vue-cli-plugin-style-resources-loader（前提是已經(jīng)安裝過 less less-loader）
// 沒有出錯(cuò)的話，可以無視這里
 npm i style-resources-loader vue-cli-plugin-style-resources-loader -D 
 或 
 yarn add style-resources-loader vue-cli-plugin-style-resources-loader -D
**

第二步配置vue.config.js 


const path = require("path");
  module.exports = {
   ...
   pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [
       //這個(gè)是加上自己的路徑，
       //注意：試過不能使用別名路徑
       path.resolve(__dirname, "./src/assets/variable.less")
       ]
     }
   }
   ...
  }

或者使用官網(wǎng)的自動(dòng)導(dǎo)入在chainWebpack中引入

https://cli.vuejs.org/zh/guid...

二、全局配置sass（直接配置vue.config.js）

注意：官網(wǎng)獨(dú)愛sass，這種loader的形式只有sass才合適用，其他的（less、stylus）都會(huì)報(bào)錯(cuò)。

module.exports = {
  ...
  css: {
    loaderOptions: {
      sass: {
       // @是src的別名
       data: `
        @import "@/assets/variable.scss";
       `
      }
    }
  }
  ...
 }

總結(jié)

以上所述是小編給大家介紹的vue-cli配置全局sass、less變量的方法,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

相關(guān)文章

最新評(píng)論