介绍//在项目下,运行下列命令行
npm install ——save-dev sass-loader//因为sass-loader依赖于node-sass,所以还要安装node-sass
npm install ——save-dev node-sass <李> var ExtractTextPlugin =,要求(& # 39;extract-text-webpack-plugin& # 39;);//css样式从js文件中分离出来,需要通过命令行安装,extract-text-webpack-plugin依赖包
module.exports =, {
,....
,模块:{
加载器才能:,
,,//解析。css文件
,,{
,,,测试:,/\ . css/美元,
,,,装载机:,ExtractTextPlugin.extract (“style",, & # 39; css # 39;)
,,},
,,//解析.vue文件
,,{
,,,测试:,/\ .vue/美元,
,,,装载机:,& # 39;vue # 39;
,,,},
,,//解析.scss文件,对于用,import 或,require 引入的sass文件进行加载,以及& lt; style lang=皊ass"在……& lt;/style>声明的内部样式进行加载
,,{
,,,测试:,/\ .scss/美元,
,,,装载机:,ExtractTextPlugin.extract (“style",, & # 39; css ! sass # 39;),//这里用了样式分离出来的插件,如果不想分离出来,可以直接这样写,装载机:& # 39;风格! css ! sass # 39;
,,}
,,)
},
,//.vue文件的配置,以下是为了在.vue文件中使用ES6语法(必须安装巴贝尔相关的依赖包),以及把使用css或sass语法的样式提取出来,如果不需要可以忽略
,vue: {
加载器才能:{
,,,js: & # 39;巴别塔# 39;,,
,,,的css: ExtractTextPlugin.extract (“css"),
,,,sass: ExtractTextPlugin.extract (“css ! sass",),,,
,,},
},
,插件:[
new 才能ExtractTextPlugin (“style.css"),//提取出来的样式放在style.css文件中
,)
,....
} import & # 39; . ./. ./css/test.scss& # 39;
要求(& # 39;. ./. ./css/test2.scss& # 39;); & lt; style lang=皊ass"比;//sass才能语法样式
& lt;/style>
怎么在webpack中配置sass模块?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
安装sass的依赖包
css-loader使你能够使用类似@ import和url(…)的方法实现需要()的功能,
<李>style-loader将所有的计算后的样式加入页面中,
二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中只
下面是webpack.config。js文件的部分配置:
sass的使用如下,例如:
引入外部样式、下面两种写法都可以使用:
在。vue文件中使用
关于怎么在webpack中配置sass模块问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注行业资讯频道了解更多相关知识。
