<del id="agy6c"></del>

<tfoot id="agy6c"></tfoot>

<strike id="agy6c"></strike>

webpack配置sass模塊的加載

番茄西紅柿發布于2019-04-23 13:16 / 3534人閱讀

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

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

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

//在項目下，運行下列命令行
npm install --save-dev sass-loader
//因為sass-loader依賴于node-sass，所以還要安裝node-sass
npm install --save-dev node-sass

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

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

　　二者組合在一起使你能夠把樣式表嵌入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文件進行加載，以及聲明的內部樣式進行加載
            {
                test: /.scss$/,
                loader: ExtractTextPlugin.extract("style", css!sass) //這里用了樣式分離出來的插件，如果不想分離出來，可以直接這樣寫 loader:style!css!sass
            }
        ]
    },
    //.vue文件的配置，以下是為了在.vue文件中使用ES6語法（必須安裝babel相關的依賴包），以及把使用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文件中使用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1649.html

一份關于webpack2和模塊打包的新手指南

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

tianren124 2019-08-20 18:34 評論0 收藏0
webpack——一站到底一

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

dack 2019-08-21 17:56 評論0 收藏0
一看就懂之webpack基礎配置

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

woshicixide 2019-08-26 10:43 評論0 收藏0
webpack4介紹與總結

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

yanbingyun1990 2019-08-23 10:42 評論0 收藏0
webpack4.0實戰那些事兒

摘要：剛剛發布，官網自稱最大的特點就是零配置。本文就詳細介紹一下實戰那些事兒。自動刷新監聽本地源代碼的變化，自動重新構建刷新瀏覽器。自動發布更新完代碼后，自動構建出線上發布代碼并傳輸給發布系統。代碼塊，一個由多個模塊組合而成，用于代碼合并與分割。 webpack4.0剛剛發布，官網自稱4.0最大的特點就是零配置。本文就詳細介紹一下webpack4.0實戰那些事兒。 1 什么是WebPack ...

褰辯話 2019-08-22 15:55 評論0 收藏0