如何在vue項目中使用sass並設置元素樣式

2020-12-21 IT軟體專家

工具

GitnpmHBuilder瀏覽器技術

vueelementJavaScriptsassCSS3 在創建vue框架項目時，可以使用CSS3定義元素樣式；還可以使用sass動態變量定義元素樣式。如果直接使用sass，啟動項目會出現報錯。那麼，如何在vue項目中使用sass？下面利用實例說明：

1、打開HBuilderX開發工具，新建項目，選擇普通項目；然後輸入項目名稱wmk，選擇vue模板，接著點擊創建按鈕

新建項目，選擇vue模板

2、在項目中src/components文件夾下，新建vue文件，輸入文件名稱，點擊創建

新建vue文件，點擊創建按鈕

3、進入到項目的根目錄，滑鼠右鍵選擇Git，輸入命令：npm i element-ui -S，安裝element

npm i element-ui -S，安裝element

4、打開項目中的main.js文件，導入element相關的模塊和樣式文件，然後使用Vue.use(ElementUI)

導入Element模塊以及樣式文件

5、在已新建的vue文件，利用Element進行頁面布局，插入一個輸入框和一個按鈕，綁定按鈕點擊事件

頁面布局，插入一個輸入框和一個按鈕

6、在script標籤中，data對象中定義變量stuNo並初始化，methods對象中定義新增方法

定義變量並初始化，定義新增方法

7、接著，在style標籤中，添加一個lang屬性，值為scss；然後使用sass中的方式定義變量font-color和font-size，在元素中使用

定義變量，並設置元素樣式

8、打開App.vue文件，導入Cut組件，然後在界面中引用

導入Cut組件，然後在界面中引用

9、使用HBuilderX工具內置命令運行，結果出現了報錯；由錯誤提示可知，缺少sass-loader模塊

由錯誤提示可知，缺少sass-loader模塊

10、在Git命令窗口，輸入npm install sass-loader --save-dev，安裝sass-loader

安裝sass-loader

11、安裝sass-loader成功後，啟動項目還是報錯；查閱相關資料，還缺少 node-sass

錯誤提示，缺少node-sass

12、接著在Git命令窗口，輸入npm install node-sass --save-dev命令，安裝node-sass

安裝node-sass

13、再次啟動項目，啟動成功

再次啟動項目，啟動成功

14、按照項目啟動成功後的項目訪問路徑，打開瀏覽器，訪問界面並查看界面效果

打開瀏覽器，訪問界面並查看界面效果

15、檢查界面發現，樣式沒有起到作用；修改定義樣式，並設置對應的元素類

修改定義樣式，並設置對應的元素類

16、再次刷新瀏覽器，查看界面效果，可以發現元素樣式起到作用了

刷新瀏覽器，查看界面效果

相關焦點

  • Sass指南:Sass前世今生和如何安裝及使用Webstorm直接支持編寫
    CSS 預處理器定義了一種新的語言，其基本思想是，用一種專門的程式語言，為 CSS 增加了一些編程的特性，將 CSS 作為目標生成文件，然後開發者就只要使用這種語言進行編碼工作。通俗的說，「CSS 預處理器用一種專門的程式語言，進行 Web 頁面樣式設計，然後再編譯成正常的 CSS 文件，以供項目使用。
  • SCSS和Sass使用這種樣式語言所需的所有CSS和SCSS代碼
    直到最近，當我不得不在一個項目中切換回vanilla CSS時，我才意識到我多麼喜歡和Sass一起工作。在那段時間裡，我學到了很多，所以我決定讚美薩斯，讓這個世界變得更美好，讓你變得更快樂。如何使用Sass像Sass這樣的預處理器在我們的RoR世界中被廣泛使用，使得編寫CSS變得更加容易和無雜亂。
  • 如何使用vue3搭建項目框架並運行
    打開Git命令窗口2、使用npm命令安裝vue/cli，這裡需要使用--force；由於之前安裝了vue2下的vue cli，需要覆蓋之前的npm install -g @vue/cli --force3、使用npm init初始化項目，命令為：npm init vite-app
  • 如何在Node.js使用Pug創建表格並設置樣式
    Node.js瀏覽器技術expresspug在Node.js項目中，如果項目使用Pug模板引擎，想要新建一個表格，該怎麼實現？單個表格沒有加樣式屬性，如何設置表格樣式？5、在表格對應的元素標籤上，添加樣式style，設置樣式屬性添加樣式style，設置樣式屬性
  • Sass簡易指南之基本語法詳析:變量大作戰
    聲明變量定義變量的語法：在有些程式語言中（如，JavaScript）聲明變量都是使用關鍵詞「var」開頭，但是在 Sass 不使用這個關鍵詞，而是使用大家都喜歡的美元符號「$」開頭。普通變量定義之後可以在全局範圍內使用。$fontSize: 12px; body{ font-size:$fontSize; }編譯後的css代碼：body{ font-size:12px; }默認變量sass 的默認變量僅需要在值後面加上 !default 即可。
  • vue-devtools調試工具安裝與使用的簡單教程
    使用vue開發項目時，如果習慣vue當前項目一些操作後相關數據的變化的log，可以安裝一個vue-devtools調試工具，如何安裝呢？請看下邊：一：下載與安裝：1.下載好vue-devtools壓縮包(crx類型的壓縮包)，直接解壓到你自己選擇的本地目錄中：2.打開谷歌瀏覽器，打開設置，並找到擴展程序：3.
  • css利器之sass
    極大的提高了編寫樣式的效率。前言：Sass為web前端開發而生，它解決了直接進行css編寫時權重難以控制，嵌套層級多導致代碼編寫不方便的問題。並且加入了變量定義，循環，判斷等類似程式語言的代碼模式。極大的提高了編寫樣式的效率。
  • SASS絕對新手入門教程
    鑲套類似我們在html中使用的方式。所以會使用預設的5px。選擇器繼承選擇器繼承允許你告訴任何選擇器從另外一個選擇器繼承所有的樣式，非常棒的一個特性。使用它需要指定關鍵字@extend，後面跟隨一個你喜歡繼承的選擇器，然後所有的選擇器的樣式將會被繼承。
  • 如何在Vue3框架中使用Element Plus
    那麼，Vue3框架如何使用Element Plus？下面利用實例說明：操作步驟：1、打開電腦硬碟，新建一個文件夾aam，打開文件夾並打開Git命令窗口；輸入命令npm install -g @vue/cli
  • Vue全家桶之Vue2.X和Vue3.X腳手架創建項目的不同方式
    Vue 的基礎語法 ，常用特性 ，組件化開發以及路由的使用前面的文章已經全部介紹了，同時也介紹了如何使用webpack的一些依賴loaders和插件來一步步創建項目的。今天來介紹一些如何使用vue腳手架來創建項目通過腳手架Vue cli 腳手架來創建項目有三種方式：1.基於 交互式命令行 的方式，創建 Vue項目 使用命令 vue create my-project （基於Vue cli 3.X以上版本 npm install
  • 用Vue 和Bootstrap 4 來構建Web前端界面
    但是Bootstrap依賴於已經嚴重過時，被拋棄的jQuery組件，那麼如何解決這個問題就迫在眉睫了。Vue項目以其輕巧、高性能，易上手，雙向數據綁定，組件化的特點，快速流行並廣為使用，那麼有沒有可能將Bootstrap的依賴改為Vue呢？答案是肯定的。本文我們就介紹這樣一個解決方案，Bootstrap-Vue項目。
  • [vue3]如何在vue3中優雅地使用v-model?
    他只是單向變動v-bind支持的類型html中的屬性、css的樣式、對象、數組、number 類型、bool類型v-bind使用// 綁定文本<p v-bind="message"></p>// 綁定屬性
  • 如何在Element中實現表格雙擊查看詳情
    ElementJavaScriptCSS3在使用Element進行開發項目時，使用el-table（表格）組件，如果表格欄位是編號，顯示的是描述，或雙擊表格行記錄，查看這條記錄的詳情，該如何實現呢>實現功能：欄位數據為編號（數值），界面上要顯示文字內容雙擊表格行記錄，彈出一個詳情窗口，可以查看步驟如下：1、在已創建好的Element項目中
  • 使用腳手架3創建的vue項目配置成多頁面的簡單案例
    前言：使用腳手架創建的vue項目工程默認是屬於單頁面單入口的，有時根據開發需要，經常要求將傳統的單入口頁面改成多入口多頁面的項目，其實腳手架3創建的vue項目，官方提供了一個叫pages的對象，我們可以自行創建一個vue.config.js文件，在裡邊進行一些配置，如，
  • vue中v-model詳解
    (一)vue中經常使用到<input>和<textarea>這類表單元素。
  • sass的基礎入門語法
    前端發展到現在都有了不小的改變，今天主要談一下css擴展語法sass的基本用法和語法。sass是什麼？Sass 是一款強化 CSS 的輔助工具，它在 CSS 語法的基礎上增加了變量 、嵌套 、混合 、導入 等高級功能，這些拓展令 CSS 的開發更加便捷。
  • Vue.js 教程:構建一個特斯拉汽車餘電計算器
    App.vue 是應用程式的入口組件。圖下方是 App.vue 組件。列表 1項目入口點Vue 應用程式在 main.js 中啟動。在 main.js 中，你首先需要創建一個新的「root Vue 實例」。如下所示：1. 導入 Vue：從「vue」導入 Vue。
  • vue3.x項目實戰一,企業網站項目開發,項目實戰中掌握知識點
    原先的課程呢，在講解的過程中，都是講的一些基礎的東西，大家可能在聽我的零基礎學vue的課程中對基礎已經有了個基本的掌握。為了使課程，更加具有實性，從本集課開始，我講帶大家，來進行真實項目的開發。在項目開發的過程中，我們把一些基礎的東西融入進去，讓大家更加直觀的學習。
  • 如何在使用EJS模板引擎的項目中使用IF語句
    瀏覽器技術expressEJSJavaScript在Node.js和EJS結合起來使用的項目中，可以在模板中使用判斷語句，如if語句。根據變量的值不同顯示不同的內容，並設置標籤元素樣式。下面利用實例說明：操作如下：1、創建Node.js項目，使用EJS模板引擎；然後新建ejs文件judge.ejs