Wie verpacke und trenne ich Sass? Einführung in Methoden zum Verpacken und Trennen von Sass

Dieser Artikel enthält Informationen zum Verpacken und Trennen von Sass? Die Einführung in die Methode zum Verpacken und Trennen von Sass hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.

Vorwort: package.json ist die Paketverwaltungskonfigurationsdatei in npm, webpack.config.js ist die Standardkonfigurationsdatei von Webpack und webpack.plugin.js ist das, was ich zum Erstellen von Webpack verwendet habe. config.js Es sieht klarer aus und einige der extrahierten Konfigurationsinhalte extrahieren, wie der Name schon sagt, die Plug-in-Konfiguration.

node_modules ist das Installationsverzeichnis der abhängigen Pakete nach der Ausführung von npm install.

Sass verpacken und trennen

Zwei Pakete im Projektverzeichnis installieren:

npm install –save-dev node-sass

npm install –save - dev sass-loader

Wenn die Installation nicht erfolgreich ist, müssen Sie das Verzeichnis node_modules löschen, das Verzeichnis mit npm install neu installieren und diese beiden Pakete erneut installieren

Schreiben Sie die Loader-Konfiguration:

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'  
})

Löschen Sie das dist-Ordner-Webpack zum Verpacken und überprüfen Sie die Stileinstellung von #sassLearn in dist/css/index.css (d. h. die sass- und js-Dateien wurden getrennt).

npm run server Öffnen Sie den Browser, um den Effekt anzuzeigen

Verwandte Empfehlungen:

Wie kann man weniger verpacken und trennen? Eine Einführung in die Methode, weniger zu verpacken und zu trennen

Wie verpacke ich Bilder in HTML? So verpacken Sie HTML-Bilder

Das obige ist der detaillierte Inhalt vonWie verpacke und trenne ich Sass? Einführung in Methoden zum Verpacken und Trennen von Sass. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!