Wie konfiguriert Webpack das Laden von Sass-Modulen? (ausführliche Erklärung)

Der Inhalt dieses Artikels besteht darin, vorzustellen, wie Webpack das Laden von Sass-Modulen konfiguriert. (ausführliche Erklärung). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Für von Webpack verwaltete Projekte hoffen wir, Sass zum Definieren von Stilen verwenden zu können. Um normal kompilieren zu können, müssen wir die folgende Konfiguration vornehmen. Ich werde hier nicht über die ersten Schritte mit Webpack sprechen. Als Einführungsartikel empfehle ich diesen „Erste Schritte mit Webpack“.

Um Sass verwenden zu können, müssen wir das Sass-Abhängigkeitspaket installieren

//在项目下，运行下列命令行
npm install --save-dev sass-loader
//因为sass-loader依赖于node-sass，所以还要安装node-sass
npm install --save-dev node-sass

Natürlich, wenn Sie Styles, CSS-Loader und Style- verwenden Loader sind ebenfalls erforderlich. Abhängige Pakete können, wenn sie nicht installiert sind, ähnlich wie die oben beschriebene Methode installiert werden.

• Mit dem CSS-Loader können Sie Methoden wie @import und url(...) verwenden implementieren Sie die Funktion require();

• style-loader fügt alle berechneten Stile zur Seite hinzu

Die Kombination der beiden ermöglicht es Ihnen Betten Sie Stylesheets in das Webpack in der gepackten JS-Datei ein.

Das Folgende ist Teil der Konfiguration der Datei 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文件进行加载，以及<style lang="sass">...</style>声明的内部样式进行加载
            {
                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 wird wie folgt verwendet, zum Beispiel:

• Um externe Stile einzuführen, können die folgenden zwei Schreibmethoden verwendet werden:

import '../../css/test.scss'
require('../../css/test2.scss');

• Verwenden Sie

<style lang="sass">
     //sass语法样式
</style>

in der .vue-Datei

Das obige ist der detaillierte Inhalt vonWie konfiguriert Webpack das Laden von Sass-Modulen? (ausführliche Erklärung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!