How to package and separate sass? Introduction to methods of packaging and separating sass

This article brings you information about how to package and separate sass? The introduction to the method of packaging and separating Sass has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Foreword: package.json is the package management configuration file in npm, webpack.config.js is the default configuration file of webpack, and webpack.plugin.js is what I use to make webpack.config.js It looks clearer and some of the configuration content extracted is, as the name implies, the configuration of the plug-in.

node_modules is the installation directory of dependent packages after executing npm install.

Packaging and separating sass

Install two packages in the project directory:

npm install –save-dev node-sass

npm install –save -dev sass-loader

If the installation is unsuccessful, you need to delete the node_modules directory, re-install the directory with npm install, and install these two packages again

Write loader configuration:

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

Delete the dist folder webpack for packaging, and check that there are #sassLearn style settings in dist/css/index.css (that is, the sass and js files have been separated)

npm run server Open the browser to view the effect

Related recommendations:

How to package and separate less? An introduction to the method of packaging and separating less

#How to package images in html? How to package html images

The above is the detailed content of How to package and separate sass? Introduction to methods of packaging and separating sass. For more information, please follow other related articles on the PHP Chinese website!