成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

webpack配置sass模塊的加載

番茄西紅柿 / 3541人閱讀

摘要：管理的項(xiàng)目，我們希望用定義樣式，為了正常編譯，需要做如下配置。這里不講的入門，入門的文章，我推薦這篇入門。

webpack管理的項(xiàng)目，我們希望用sass定義樣式，為了正常編譯，需要做如下配置。這里不講webpack的入門，入門的文章，我推薦這篇《webpack入門》。

　　為了使用sass，我們需要安裝sass的依賴包

//在項(xiàng)目下，運(yùn)行下列命令行
npm install --save-dev sass-loader
//因?yàn)閟ass-loader依賴于node-sass，所以還要安裝node-sass
npm install --save-dev node-sass

　　當(dāng)然了，使用樣式的話，css-loader和style-loader也是必須的依賴包，如果沒有安裝，可以類似上述的方法安裝

  • css-loader使你能夠使用類似@import 和 url(…)的方法實(shí)現(xiàn) require()的功能；
  • style-loader將所有的計(jì)算后的樣式加入頁面中；

　　二者組合在一起使你能夠把樣式表嵌入webpack打包后的JS文件中。

 

下面是webpack.config.js文件的部分配置：

var ExtractTextPlugin = require(extract-text-webpack-plugin);//css樣式從js文件中分離出來,需要通過命令行安裝 extract-text-webpack-plugin依賴包
module.exports = {
    ....
    module: {
        loaders: [
            //解析.css文件
            {
                test: /.css$/,
                loader: ExtractTextPlugin.extract("style", css)
            },
            //解析.vue文件
            {
                test: /.vue$/,
                loader: vue
            }, 
            //解析.scss文件,對于用 import 或 require 引入的sass文件進(jìn)行加載，以及聲明的內(nèi)部樣式進(jìn)行加載
            {
                test: /.scss$/,
                loader: ExtractTextPlugin.extract("style", css!sass) //這里用了樣式分離出來的插件，如果不想分離出來，可以直接這樣寫 loader:style!css!sass
            }
        ]
    },
    //.vue文件的配置，以下是為了在.vue文件中使用ES6語法（必須安裝babel相關(guān)的依賴包），以及把使用css或sass語法的樣式提取出來，如果不需要可以忽略
    vue: {
        loaders: {
            js: babel, 
            css: ExtractTextPlugin.extract("css"),
            sass: ExtractTextPlugin.extract("css!sass")            
        },
    },
    plugins: [
        new ExtractTextPlugin("style.css") //提取出來的樣式放在style.css文件中
    ]
    ....
}

 

sass的使用如下，例如：

  • 引入外部樣式，下面兩種寫法都可以使用：
import ../../css/test.scss
require(../../css/test2.scss);
  • 在.vue文件中使用

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1649.html

相關(guān)文章

  • 一份關(guān)于webpack2和模塊打包的新手指南

    摘要：使用讓從打包文件中刪除未使用的導(dǎo)出項(xiàng)以減少文件大小。最后，用以下內(nèi)容替換的部分在命令行中運(yùn)行將以監(jiān)視模式啟動(dòng)，當(dāng)目錄中的文件更改時(shí)，它將重新編譯。這種轉(zhuǎn)換涉及三個(gè)單獨(dú)的加載器和庫在配置文件中為文件添加新規(guī)則。 webpack已成為現(xiàn)代Web開發(fā)中最重要的工具之一。它是一個(gè)用于JavaScript的模塊打包工具，但是它也可以轉(zhuǎn)換所有的前端資源，例如HTML和CSS，甚至是圖片。它可以讓你...

    tianren124 評論0 收藏0

  • webpack——一站到底一

    摘要：入門在逐漸成為一個(gè)成熟的青年路上，一直備受大家青睞，然而還在不斷的健身，希望以最好的姿態(tài)呈現(xiàn)給各位，如今他已經(jīng)。比起又強(qiáng)化骨骼，變得更堅(jiān)實(shí)。 webpack入門 webpack在逐漸成為一個(gè)成熟的青年路上，一直備受大家青睞， 然而還在不斷的健身，希望以最好的姿態(tài)呈現(xiàn)給各位，如今他已經(jīng)v3。 比起1 、2又強(qiáng)化骨骼，變得更堅(jiān)實(shí)。 一、什么是webpack 官方給出： Webpa...

    dack 評論0 收藏0

  • 一看就懂之webpack基礎(chǔ)配置

    摘要：一看就懂之基礎(chǔ)配置一簡介本質(zhì)上，是一個(gè)現(xiàn)代應(yīng)用程序的靜態(tài)模塊打包器。屬性表示的是的上下文目錄，配置入口文件的時(shí)候，如果入口文件使用的是相對路徑，那么就是相對于所在的目錄。通常用于指定以何種方式導(dǎo)出庫，通常用于指定接收庫的名稱。 一看就懂之webpack基礎(chǔ)配置 一、webpack 簡介 本質(zhì)上，webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module b...

    woshicixide 評論0 收藏0

  • webpack4介紹與總結(jié)

    摘要：隨著承擔(dān)地職責(zé)越來越大，模塊化開發(fā)的需求越來越急迫。我們可以把當(dāng)成是模塊化標(biāo)準(zhǔn)的實(shí)現(xiàn)方案，但的功能不僅限于此。支持多種模塊使用方式，包括的。下面介紹一下在工程中常用的。最后一個(gè)的輸出就是我們最終要的結(jié)果。在文件有值的情況下，是必要的。 由于web應(yīng)用擴(kuò)展地得極其迅猛，前端技術(shù)也是日新月異，前端的苦不是有多難學(xué)，而是我剛學(xué)完，這東西就被淘汰了（手動(dòng)哭臉）?？蚣芊矫嫖覀冇衯ue、react...

    yanbingyun1990 評論0 收藏0

  • webpack4.0實(shí)戰(zhàn)那些事兒

    摘要：剛剛發(fā)布，官網(wǎng)自稱最大的特點(diǎn)就是零配置。本文就詳細(xì)介紹一下實(shí)戰(zhàn)那些事兒。自動(dòng)刷新監(jiān)聽本地源代碼的變化，自動(dòng)重新構(gòu)建刷新瀏覽器。自動(dòng)發(fā)布更新完代碼后，自動(dòng)構(gòu)建出線上發(fā)布代碼并傳輸給發(fā)布系統(tǒng)。代碼塊，一個(gè)由多個(gè)模塊組合而成，用于代碼合并與分割。 webpack4.0剛剛發(fā)布，官網(wǎng)自稱4.0最大的特點(diǎn)就是零配置。本文就詳細(xì)介紹一下webpack4.0實(shí)戰(zhàn)那些事兒。 1 什么是WebPack ...

    褰辯話 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<