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有兩種語法。

推薦度：

點擊下載本文 文檔為doc格式

導讀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