Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces "how to pack and separate sass" in detail, the content is detailed, the steps are clear, and the details are handled properly. I hope this "how to pack and separate sass" article can help you solve your doubts.

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 some configuration content extracted by me to make webpack.config.js look clearer. As the name implies, the configuration of the plug-in is extracted.

Node_modules is the installation directory of the dependency package after npminstall is executed.

Package and detach sass

Install two packages in the project directory:

Npminstall-save-devnode-sass

Npminstall-save-devsass-loader

If the installation is not successful, you need to delete the node_modules directory. After re-npminstall installing the directory, install the two packages again

Write the loader configuration:

The configuration of loader should be in order

{

Test:/\ .scss $/

Use: [{

Loader: "style-loader" / / createsstylenodesfromJSstrings}

{

Loader: "css-loader" / / translatesCSSintoCommonJS}

{

Loader: "sass-loader" / / compilesSasstoCSS}]}

Insert a layer of blocks about sass into the src/index.html

Writing Sass file: create a new sassLe.scss file in src/css

$nav-color:#fff

# sassLearn

{

$width:100%

Width:$width

Height:30px

Background-color:$nav-color

;}

Introducing sass into src/entry.js

Importsassfrom'./css/sassLe.scss'

Check the effect of npmrunserver after webpack (but at this time # sassLearn is packaged into entry.js)

Modify the use in the sass configuration in webpack-config.js

Use:extractTextPlugin.extract ({

Use: [{

Loader:'css-loader'}

{

Loader:'sass-loader'

}]

Fallback:'style-loader'

})

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

Npmrunserver opens a browser to see the effect

After reading this, the article "how to package and separate sass" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.