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