成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue-cli中配置全局sass變量

BlackFlagBin / 2860人閱讀

摘要：配置安裝修改的目錄下選項修改為如下選項個人使用習(xí)慣我這里是指定了為我的根文件，其他的文件都引入到這個文件中。

配置

安裝：
sass-resources-loader

npm i sass-resources-loader --save-dev

修改vue-cli的目錄下build/utils.js

scss選項修改為如下選項：

  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders("less"),
    sass: generateLoaders("sass", { indentedSyntax: true }),
    scss: generateLoaders("sass").concat({
      loader:"sass-resources-loader",
      options:{
        resources:path.resolve(__dirname,"../src/assets/sass/base_core.scss")
      }
    }),
    stylus: generateLoaders("stylus"),
    styl: generateLoaders("stylus")
  }
個人使用習(xí)慣

我這里是指定了../src/assets/sass/base_core.scss為我的根scss文件，其他的scss文件都引入到這個scss文件中。

//  ../src/assets/sass/base_core.scss
@import "./_setting.scss";
@import "./_css3.scss";
@import "./_mixin.scss";

./_setting.scss里放的是所有靜態(tài)scss變量

$fontsize-tiny:          ptr(12px)!default;
$fontsize-small:         ptr(14px)!default;

./_mixin.scss里放的是公用的混合器或者通用類

//截字
//SCSS 的”%” 與 “.” 功能類似，但是不會輸出代碼
%ellipsis-basic {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

//文字超出后以...顯示 支持多行
@mixin fn-ellpisis($line) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
  overflow: hidden;
}

當(dāng)然，怎么歸類是個人習(xí)慣問題。

這樣，我僅僅在build/utils.js下引入一次，就可以在所有的vue組件中使用全局scss相關(guān)，而不再需要每個vue組件都引入一次了，當(dāng)然，打包也是按需打包的，用到什么scss才會打包什么scss。

怎么使用

當(dāng)然，在vue-cli中怎么配置sass環(huán)境，網(wǎng)上很多教程，就不必多說了。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/95462.html

相關(guān)文章

  • vue-cli中配置全局sass變量

    摘要：如何定義樣式的變量，使得全局的樣式可以在組件中使用，網(wǎng)上找了一些辦法，親測可以使用，我就記錄下來安裝修改的目錄下，如圖是樣式文件重新運行 如何定義樣式的變量，使得全局的樣式可以在組件中使用，網(wǎng)上找了一些辦法，親測可以使用，我就記錄下來； 1、安裝sass-resources-loader npm i sass-resources-loader --save-dev 2、修改vue-cl...

    MingjunYang 評論0 收藏0

  • 如何更有效率和質(zhì)量地開發(fā)Vue項目

    摘要：前言自總結(jié)完了上篇前端工程化的思想，并在全家桶的項目加以實踐，趁熱給大家總結(jié)一篇如何更有效率與質(zhì)量地開發(fā)項目，以及其中踩過的一個個坑。。。 前言 自總結(jié)完了上篇前端工程化的思想，并在vue全家桶的項目加以實踐，趁熱給大家總結(jié)一篇如何更有效率與質(zhì)量地開發(fā)vue項目，以及其中踩過的一個個坑。。。 基于vue-cli的自定義模板（Custom Templates） 小伙伴們的vue項目應(yīng)該都...

    ShevaKuilin 評論0 收藏0

  • 揭秘vue——vue-cli3全面配置

    摘要：中可以使用注入變量訪問環(huán)境變量中的配置信息向全局樣式傳入共享的全局變量在中引用添加兼容在中添加配置完整配置持續(xù)更新中揭秘系列 目錄 √ 配置多環(huán)境變量 √ 配置基礎(chǔ) vue.config.js √ 配置 proxy 跨域 √ 修復(fù) HMR(熱更新)失效 √ 修復(fù) Lazy loading routes Error： Cyclic dependency √ 添加別名alias √ 壓縮...

    hatlonely 評論0 收藏0

  • 在vue-cli中應(yīng)用scss/less全局變量

    摘要：首先需要安裝插件修改的，找到的加載設(shè)置修改為，這里的路徑即是我們定義全局變量的地方修改的，找到的加載設(shè)置這里的路徑即是我們定義全局變量的地方替換成上面自定義的函數(shù)更多詳細知識介紹請訪問我的個人主頁 首先需要安裝插件：sass-resources-loader npm i sass-resources-loader --save-dev scss: 修改vue-cli的build/uti...

    Alex 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<