Comment webpack configure-t-il le chargement des modules sass ? (explication détaillée)

Le contenu de cet article est de présenter comment webpack configure le chargement des modules sass ? (explication détaillée). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Pour les projets gérés par webpack, nous espérons utiliser sass pour définir les styles. Afin de compiler normalement, nous devons faire la configuration suivante. Je ne parlerai pas ici de démarrage avec Webpack. Pour les articles d'introduction, je recommande ce "Démarrer avec Webpack".

Pour utiliser sass, nous devons installer le package de dépendances sass

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

Bien sûr, si vous utilisez des styles, il en va de même pour css-loader et style-loader Les packages de dépendances nécessaires, s'ils ne sont pas installés, peuvent être installés de la même manière que la méthode ci-dessus

• css-loader vous permet d'utiliser des méthodes telles que @import et url(… ) pour implémenter la fonction require() ;

• style-loader ajoute tous les styles calculés à la page

Les deux sont combinés ainsi ; que vous pouvez mettre la feuille de style Embed dans le fichier JS packagé par webpack.

Ce qui suit fait partie de la configuration du fichier 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 est utilisé comme suit , par exemple :

• Introduisez des styles externes, les deux méthodes d'écriture suivantes peuvent être utilisées :

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

• Utiliser

dans le fichier .vue

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!