怎么在vue2中配置全局sass樣式變量

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)怎么在vue2中配置全局sass樣式變量，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

Sass語言

      Sass是一種強(qiáng)大的css擴(kuò)展語言（css本身并不是一門語言），它允許你使用變量、嵌套規(guī)則、mixins、導(dǎo)入等css沒有但開發(fā)語言（如Java、C#、Ruby等）有的一些特性，并且完全兼容CSS語法。Sass有助于保持大型樣式表結(jié)構(gòu)良好。

      Sass有兩種語法。

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

      一種稱為SASS，是Sass以前的語法，它和python一樣，沒有{}大括號(hào)來標(biāo)志程序塊，而是以縮進(jìn)來標(biāo)志嵌套層級(jí)；而且也不使用分號(hào)，而是用換行符來分隔屬性。SASS樣式表文件要以.sass擴(kuò)展名結(jié)尾。在vue中，我們可以使用<style lang="sass"></style>來標(biāo)志里面的內(nèi)容是以SASS語法來書寫的。

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

首先，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文件，多個(gè)文件時(shí)用數(shù)組的形式傳入，這是帶有變量和mixin的scss文件
     resources: [resolveResouce('variable.scss'), resolveResouce('mixin.scss')] 注意這是我全局樣式的位置，個(gè)人不同，需做調(diào)整
    }
   }
  ];
  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') //注意這是我全局樣式的位置，個(gè)人不同，需做調(diào)整
     }
    }
   ),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
 }

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫，Vue允許可以將一個(gè)網(wǎng)頁分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。

上述就是小編為大家分享的怎么在vue2中配置全局sass樣式變量了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。