1. 程式人生 > >在 .vue檔案的樣式檔案中如何引入外部的樣式檔案 (.css .less)

在 .vue檔案的樣式檔案中如何引入外部的樣式檔案 (.css .less)

一般情況下vue開發的時候都是一個元件一個元件進行開發,每個元件都有自己的樣式檔案,

基本結構如下所示:

<template>

       <div class="test">

       測試一下,哈哈

       </div>

</template>

<script>

export default {

     name: TestVue,

}

</script>

<style lang="less" scoped>

@import './assets/test.less';

.test{

      width: 10rem;

      height: 10rem;  

      background-color: red;

}

</style>

上面我們在樣式部分,也就是style 標籤部分引入了外部的樣式檔案 test.less 檔案,

雖然引入的樣式檔案我們這裡沒有使用,但是如果你要引入的話,就按這種方式來進行引入就OK了;

相關推薦

在 .vue檔案樣式檔案如何引入外部樣式檔案 .css .less

一般情況下vue開發的時候都是一個元件一個元件進行開發,每個元件都有自己的樣式檔案, 基本結構如下所示: <template>        <div class="test">        測試一下,哈哈        </div&

gulp-html-import,在html引入外部html檔案

寫於 2016.06.14 專案地址: gulp-html-import 曾經學習PHP的時候,深深覺得include語法非常好用,後接觸了ejs,發現裡面也有類似的語法,能夠方便地引入公共html檔案;在學習了vue,react等框架以後,“元件化思想”更是在我腦海根深蒂固,再也無

在XML文件引入外部DTD檔案

XML文件通過使用DOCTYPE宣告語句(文件型別定義語句)來指明它所遵循的DTD檔案, DOCTYPE宣告語句緊跟在XML文件宣告語句後面,有兩種格式: 1.<!DOCTYPE 文件型別名稱 SYSTEM  "DTD文件的URL"> 2.<!DOCTYP

vue引入外部js檔案和scss檔案

最近在做一個vue專案,已經有一段時間了。之前對在vue專案如何引入外部的js檔案和scss檔案一片空白。網上百度也是魚龍混雜,很少有用的東西。後來自己通過一個線上專案學習到了。所以將自己的實現記錄下來 我將寫在vue檔案的js抽出來,放在一個js檔案裡面。然後在vue引入的形式如下(es6的寫

vue 引入外部js檔案 - 配置component

1.main.js   2.importJs.js // 匯入外部js import Vue from 'vue' // 匯入外部js import Vue from 'vue' Vue.component('remote-script', { re

vue引入本地swf檔案時出現的路徑錯誤問題

    這幾天改一個老的政府專案。裡面用到了flash動畫,這個之前沒有接觸過,以為路徑就和普通的圖片引入一樣。 就這樣寫了: 但是這樣發現一個問題,就是在頁面上確實會顯示讓你啟用flash控制元件,但是點開後會發現一片空白。 一開始我以為是swf檔案的問題,但是在一個簡單的

html引入外部檔案

       在我們製作html頁面的時候常常需要引入一些外部檔案來使自己的工作更加高效,下面我就分享一下,在製作html是本人用到的一些外部檔案引用:        1.外部引入JavaScript檔案 <script type="text/javascript" src="../javascrip

如何將公共的外部檔案css,js整合到一起引入

在實際過程中,嚐嚐會遇到一大堆外部的js和css檔案,有經驗的人會將其分類,分門別類的引入各頁面中,但是相對於初學者或者沒有良好的程式碼規範的人會時常將其弄的亂七八糟,比如這樣: 看,是不是很亂,乾脆不知道哪個是哪個,有一種不管誰是誰,直接放上去,起作用就行的感覺(

HTML引用外部JS檔案失效原因

今天在練習中碰到“引用外部的一個js檔案但是卻失效”的情況,實在不懂,百度後才知是引用的位置不對,錯誤的程式碼如下: <head> <meta charset="UTF-8"> <title>Day16</title> <s

gradle檔案引入其他gradle檔案

背景:     安卓專案中,gradle檔案也逐漸變得臃腫起來,需要分開管理,否則一大堆在一起,就很難維護了。 解決方案:   採用apply from: 'xx.gradle'這樣的語句就可以引入其他gradle檔案了。 Demo(整合aspectj):     

Django_部落格專案 引入外部js檔案內含模板語法無法正確獲取值得說明和處理

問題描述 :   專案中若存在對一段js程式碼複用多次的時候, 通常將此段程式碼移動到一個單獨的靜態檔案中在被使用的地方利用 script 標籤的 src 屬性進行外部呼叫   但是如果此檔案中存在使用 HTML模板語言中的 {{ }}方式傳遞相關屬性值, 會導致無法正確獲取. 問題現象: 

Spring引入外部properties檔案

1、背景:Spring配置檔案需要通過context:property-placeholder標籤或者PropertyPlaceholderConfigurer類來引入classpath路徑下的properties檔案,示例如下: <context:property-place

微信小程式從零開始開發步驟引入外部js 檔案

            上一章講到小程式頁面的四種常見的跳轉的方法,這一章寫如何引入一個外部的js檔案,既utils資料夾的用處,其實步驟很簡單:1:準備好外部想要引入的外部檔案,命名為util.js,並且填充固定的檔案內容(一般是固定的庫)圖片.png2:開啟util.js ,繼續填寫重要內容將要使用的方法

前端設計關於外部js檔案載入的速度優化

  在一般情況下,許多人都是將<script>寫在了<head>標籤中,而許多瀏覽器都是使用單一的執行緒來載入js檔案的,從上往下,從左往右。 若是載入過程出錯,那麼網頁就會阻塞,就像許多網站用Google的CDN庫,而我們在牆內訪問一樣。頁面不會出來

JavaScript引入外部js檔案時報錯

最近任務涉及到javascript。其中呼叫外部js檔案的函式時,用IE6一直報錯。但是用火狐瀏覽器,或者將javascript寫到jsp/html時,又正常執行。 由此可見,問題出在IE瀏覽時,jsp頁面載入不了js檔案。 瘋狂查了好長時間,偶然間看見關於編碼格式的說法。猜想會不會是

3.2 mybatis.config.xml_properties_引入外部配置檔案

properties屬性不常用 例項: 1.專案完整結構目錄 properties-config.properties jdbc.driver=com.mysql.jdbc.Driver jdbc.url=jdbc:mysql://localhost:3306/myb

xcode,在webView引入本地html,image,js,css檔案的方法

專案需求 最近開發的專案,需要一個webView,同時這個webView會需要引入一些專案中的資源: 一個本地的html檔案,作為webView的模板兩張loading圖片,在圖片未載入的時候進行佔位jquery.js,scrollLoading.js 也是本地的,實現滾動載入圖片功能然後就開始了漫長的Go

教你如何在FLASH載入外部SWF檔案

方法很簡單,但是卻相當實用,比如做一個flash全站,需要按功能將網站分解成多個flash,然後利用本例中的原理,通過一個首頁flash呼叫其他各個頁面的flash檔案即可實現。本例為基礎示例,可以根據需要進行擴充套件,關鍵是要學會變通,將其變為自己的東西。 實現方法: 1

vue2引入外部js檔案(以hammer.js為例)

但是怎麼把外部的這個hammer.js檔案融入vue-cil中呢? 下面是步驟 基本命令: vue init webpack hxammerdemo cd hxammerdemo/ cnpm install 新建紅框內的js目錄和 hammer.js檔案(這個檔案就是

C++引入外部txt檔案內容的方法

1.引入標頭檔案fstream 2.定義物件如果是讀入應該用 ifstream類魔板,如果是往裡面寫應為ofream;int  out 3.例項化出來一個ifstream 的物件,物件.open(“”,)第一個引數寫檔案開啟的位置,第二個寫開啟的方式例如讀入用ios::in