• <fieldset id="8imwq"><menu id="8imwq"></menu></fieldset>
  • <bdo id="8imwq"><input id="8imwq"></input></bdo>
    最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
    問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
    當前位置: 首頁 - 科技 - 知識百科 - 正文

    vue2中使用sass并配置全局的sass樣式變量的方法

    來源:懂視網 責編:小采 時間:2020-11-27 22:08:26
    文檔

    vue2中使用sass并配置全局的sass樣式變量的方法

    vue2中使用sass并配置全局的sass樣式變量的方法:Sass語言 Sass是一種強大的css擴展語言(css本身并不是一門語言),它允許你使用變量、嵌套規則、mixins、導入等css沒有但開發語言(如Java、C#、Ruby等)有的一些特性,并且完全兼容CSS語法。Sass有助于保持大型樣式表結構良好。 Sass有兩種語法。
    推薦度:
    導讀vue2中使用sass并配置全局的sass樣式變量的方法:Sass語言 Sass是一種強大的css擴展語言(css本身并不是一門語言),它允許你使用變量、嵌套規則、mixins、導入等css沒有但開發語言(如Java、C#、Ruby等)有的一些特性,并且完全兼容CSS語法。Sass有助于保持大型樣式表結構良好。 Sass有兩種語法。

    Sass語言

          Sass是一種強大的css擴展語言(css本身并不是一門語言),它允許你使用變量、嵌套規則、mixins、導入等css沒有但開發語言(如Java、C#、Ruby等)有的一些特性,并且完全兼容CSS語法。Sass有助于保持大型樣式表結構良好。

          Sass有兩種語法。

          一種稱為SCSS,是一個CSS3語法的擴充版本,也就是說,所有符合CSS3語法的樣式表也都是具有相同語法意義的SCSS文件,SCSS樣式表文件要以.scss擴展名結尾。在vue中,我們可以使用<style lang="scss"></style>來標志里面的內容是以SCSS語法來書寫的。

          一種稱為SASS,是Sass以前的語法,它和python一樣,沒有{}大括號來標志程序塊,而是以縮進來標志嵌套層級;而且也不使用分號,而是用換行符來分隔屬性。SASS樣式表文件要以.sass擴展名結尾。在vue中,我們可以使用<style lang="sass"></style>來標志里面的內容是以SASS語法來書寫的。

    在vue中使用樣式文件sass,如果每個.vue文件都引入該樣式,build出來文件后,勢必會造成樣式的重復,冗余,如果在main.js中全局引入一個scss文件,在其中定義變量在其他組件或者頁面中引用報變量未定義錯誤,其他的樣式可以正常顯示,顯然是編譯的問題。那么,全局設置并加載樣式就顯得很有必要了!

    首先,npm安裝好

     "sass-loader": "^6.0.7",
     "sass-resources-loader": "^1.3.3",

    在build/webpack.base.conf.js中,在module的rules里添加

    {
     test: /\.scss$/,
     loaders: ["style", "css", "sass"]
     }

    然后在build/utils.js文件中加入如下代碼:

    需要注意的是:我的全局樣式是放在src/common/sass/index.scss中的

     function resolveResouce(name) {
     return path.resolve(__dirname, '../src/common/sass/' + name);
     }
     function generateSassResourceLoader() {
     var loaders = [
     cssLoader,
     'postcss-loader',
     'sass-loader',
     {
     loader: 'sass-resources-loader',
     options: {
     //這是用到的sass文件,多個文件時用數組的形式傳入,這是帶有變量和mixin的scss文件
     resources: [resolveResouce('variable.scss'), resolveResouce('mixin.scss')] 注意這是我全局樣式的位置,個人不同,需做調整
     }
     }
     ];
     if (options.extract) {
     return ExtractTextPlugin.extract({
     use: loaders,
     fallback: 'vue-style-loader'
     })
     } else {
     return ['vue-style-loader'].concat(loaders)
     }
     }

    最后,將該頁面下方的return部分,改成如下模樣

     return {
     css: generateLoaders(),
     postcss: generateLoaders(),
     less: generateLoaders('less'),
     //sass: generateLoaders('sass', { indentedSyntax: true }),
     //scss: generateLoaders('sass'),
     sass: generateSassResourceLoader(),
     scss: generateLoaders('sass')
     .concat(
     {
     loader: 'sass-resources-loader',
     options: {
     resources: path.resolve(__dirname, '../src/common/sass/index.scss') //注意這是我全局樣式的位置,個人不同,需做調整
     }
     }
     ),
     stylus: generateLoaders('stylus'),
     styl: generateLoaders('stylus')
     }

    總結

    以上所述是小編給大家介紹的vue2中使用sass并配置全局的sass樣式變量,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!

    聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

    文檔

    vue2中使用sass并配置全局的sass樣式變量的方法

    vue2中使用sass并配置全局的sass樣式變量的方法:Sass語言 Sass是一種強大的css擴展語言(css本身并不是一門語言),它允許你使用變量、嵌套規則、mixins、導入等css沒有但開發語言(如Java、C#、Ruby等)有的一些特性,并且完全兼容CSS語法。Sass有助于保持大型樣式表結構良好。 Sass有兩種語法。
    推薦度:
    • 熱門焦點

    最新推薦

    猜你喜歡

    熱門推薦

    專題
    Top
    主站蜘蛛池模板: 亚洲欧美日韩精品久久亚洲区| 国产精品久久久久久搜索| 久久er国产精品免费观看2| 老司机91精品网站在线观看| 亚洲精品视频在线| 国产一在线精品一区在线观看| 麻豆国内精品欧美在线| 亚洲精品你懂的在线观看| 国产精品揄拍100视频| 色花堂国产精品第一页| 精品国产一区二区22| 伊人久久无码精品中文字幕| 99久久人妻无码精品系列 | 亚洲麻豆精品国偷自产在线91 | 亚洲精品制服丝袜四区| 久久精品国产第一区二区三区| 91精品国产91久久综合| 91麻精品国产91久久久久| 久久久久久一区国产精品| 无码精品国产VA在线观看DVD | 人妻精品久久无码区| 亚洲精品国产成人专区| 日韩精品免费一线在线观看| 国内精品久久久久久99| 911亚洲精品国内自产| 亚洲精品中文字幕无码蜜桃 | 国精品无码一区二区三区在线| 97精品在线播放| 亚洲精品无码精品mV在线观看| 久久九九亚洲精品| 无码人妻精品一区二| 99久久成人国产精品免费| 久久亚洲av无码精品浪潮| 国产精品免费无遮挡无码永久视频 | 日本精品一区二区三区在线视频| 久久国产亚洲精品无码| 人精品影院| 久久99精品久久久久子伦| 国产色精品vr一区区三区| 国产精品美女久久久久| 久久久无码精品午夜|