sass或者less都提供變量設置,在需求切換主題的項目中使用less或者sass變量,只要修改變量值,編譯后所有用到該變量的樣式都會被修改為你想要的效果,但是在vue-cli搭建的項目中,在main.js中全局引入一個scss文件,在其中定義變量在其他組件或者頁面中引用報變量未定義錯誤,其他的樣式可以正常顯示,顯然是編譯的問題。
傻瓜式引用
在每個用到全局變量的組件都引入該全局樣式文件
@import 'path/fileName.scss'
但是組件或者頁面不在統一層目錄下,引入的路徑可能也會有差異,所以還是看看 sass-resources-loader
的解決方法吧。
sass-resources-loader引入sass全局變量
sass-resources-loader可以訪問sass資源任何一個需要訪問的sass模塊。所以,可以使用共享變量和混合所有SASS樣式,而不去每個文件都引用。
安裝sass-resources-loader
npm install --save-dev sass-resources-loader
修改sass配置
在 build
文件夾下找到 util.js
修改sass編譯器loader的配置
// 全局文件引入 當然只想編譯一個文件的話可以省去這個函數 function resolveResource(name) { return path.resolve(__dirname, '../static/style/' + name); } function generateSassResourceLoader() { var loaders = [ cssLoader, 'sass-loader', { loader: 'sass-resources-loader', options: { // 多個文件時用數組的形式傳入,單個文件時可以直接使用 path.resolve(__dirname, '../static/style/common.scss' resources: [resolveResource('common.scss')] } } ]; if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) } }
修改sass配置的調用為 generateSassResourceLoader()
return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less'), // vue-cli默認sass配置 // sass: generateLoaders('sass', { indentedSyntax: true }), // scss: generateLoaders('sass'), // 新引入的sass-resources-loader sass: generateSassResourceLoader(), scss: generateSassResourceLoader(), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') }
在 main.js
中引用 common.scss
文件,重啟服務,其中定義的變量在其他組件就可以使用了。
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com