在vue-cli3.0中使用預(yù)處理器配置全局變量的方法

發(fā)布時(shí)間：2020-08-12 15:27:08 來(lái)源：億速云閱讀：362 作者：小新欄目：開(kāi)發(fā)技術(shù)

這篇文章主要介紹在vue-cli3.0中使用預(yù)處理器配置全局變量的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

你可以在創(chuàng)建項(xiàng)目的時(shí)候選擇預(yù)處理器 (Sass/Less/Stylus)。如果當(dāng)時(shí)沒(méi)有選好，內(nèi)置的 webpack 仍然會(huì)被預(yù)配置為可以完成所有的處理。你也可以手動(dòng)安裝相應(yīng)的 webpack loader：

# Sass
npm install -D sass-loader node-sass

# Less
npm install -D less-loader less

# Stylus
npm install -D stylus-loader stylus

然后你就可以導(dǎo)入相應(yīng)的文件類(lèi)型，或在 *.vue 文件中這樣來(lái)使用：

<style scoped lang="stylus">
.personal
 position relative
 .banner-red
  width 100%
  height 100px
</style>

如果你想自動(dòng)化導(dǎo)入文件 (用于顏色、變量、mixin……)，你可以使用 style-resources-loader

vue add style-resources-loader

然后它會(huì)讓你選擇你使用的預(yù)處理器

在vue-cli3.0中使用預(yù)處理器配置全局變量的方法

安裝完成后選擇你使用的預(yù)處理器，他會(huì)在vue.config.js代碼中生成

在vue-cli3.0中使用預(yù)處理器配置全局變量的方法

然后重新啟動(dòng)項(xiàng)目

npm run serve

更詳細(xì)的請(qǐng)閱讀vue-cli3文檔

補(bǔ)充知識(shí)：vue-cli3構(gòu)建的項(xiàng)目中vue組件中引入stylus文件時(shí)報(bào)錯(cuò)解決辦法

報(bào)錯(cuò)表現(xiàn)

在vue-cli3.0中使用預(yù)處理器配置全局變量的方法

解決辦法：

引入文件時(shí)路徑前增加~

例子：

@import '~common/stylus/mixin.styl';

vue.config.js配置文件中alias的配置

chainWebpack: config => {
    config.resolve.alias
      .set('vue$', 'vue/dist/vue.esm.js')
      .set('@',resolve('src'))
      .set('@assets',resolve('src/assets'))
      .set('components', resolve('src/components'))
      .set('common',resolve('src/common'))
      .set('base',resolve('src/base'))
      .set('api',resolve('src/api')),
    config.resolve.symlinks(true)
  }

解釋?zhuān)簽楹涡枰黾印·

~common代表相對(duì)于common目錄，在webpack中配置了alias來(lái)簡(jiǎn)寫(xiě)common所指向的目錄

以上是在vue-cli3.0中使用預(yù)處理器配置全局變量的方法的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

在vue-cli3.0中使用預(yù)處理器 配置全局變量的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

在vue-cli3.0中使用預(yù)處理器配置全局變量的方法