Comment emballer et séparer le sass ? Introduction aux méthodes de conditionnement et de séparation du sass

Cet article vous apporte des informations sur la façon de conditionner et de séparer le sass ? L'introduction à la méthode d'emballage et de séparation de Sass a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère qu'elle vous sera utile.

Avant-propos : package.json est le fichier de configuration de gestion des packages dans npm, webpack.config.js est le fichier de configuration par défaut de webpack et webpack.plugin.js est ce que j'ai utilisé pour créer webpack. config.js Cela semble plus clair et une partie du contenu de configuration extrait est, comme son nom l'indique, la configuration du plug-in.

node_modules est le répertoire d'installation des packages dépendants après l'exécution de npm install.

Emballage et détachement de sass

Installez deux packages dans le répertoire du projet :

npm install –save-dev node-sass

npm install –save - dev sass-loader

Si l'installation échoue, vous devez supprimer le répertoire node_modules, réinstaller le répertoire avec npm install et réinstaller ces deux packages

Écrivez la configuration du chargeur :

loader的配置要有先后顺序 
{    
test: /\.scss$/,    
use: [{        
loader: "style-loader" // creates style nodes from JS strings    }, 
{        
loader: "css-loader" // translates CSS into CommonJS    }, 
{        
loader: "sass-loader" // compiles Sass to CSS    }]}
src/index.html中插入一层关于sass的区块
<div id="sassLearn"></div>
Sass文件的编写：在src/css里面新建一个sassLe.scss文件
$nav-color:#fff;
#sassLearn
{    
$width:100%;    
width:$width;    
height:30px;    
background-color:$nav-color
;}

在src/entry.js里面引入sass
import sass from ‘./css/sassLe.scss’
webpack 后 npm run server查看效果（但是此时#sassLearn是打包到entry.js当中）
修改webpack-config.js里面的sass配置中的use
use:extractTextPlugin.extract({    
use:[{      
loader:'css-loader'    },
{      
loader:'sass-loader'    
}],    
fallback:'style-loader'  
})

Supprimez le dossier webpack dist pour l'empaquetage et vérifiez qu'il existe des paramètres de style #sassLearn dans dist/css/index.css (c'est-à-dire les paramètres sass et js ont été séparés)

Ouvrez le serveur npm run dans le navigateur pour voir l'effet

Recommandations associées :

Comment empaqueter et séparer moins ? Une introduction à la méthode de packaging et de séparation moins

Comment emballer des images en html ? Comment empaqueter des images HTML

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!