vue 安装sass，运行后报错loaderContext.getResolve is not a function

2020 年 8 月
一	二	三	四	五	六	日
	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

今天自己搭建vue-cli框架，安装了element-ui，运行没有任何问题，修改了下样式，为了避免修改ele里面组件的样式出现样式污染，想着装个sass写嵌套的，这样既方便又能很好的解决问题，那么动起来：
1.安装需要的依赖：

   npm install node<span class="token operator">-</span>sass <span class="token operator">--</span>save<span class="token operator">-</span>dev       <span class="token comment">//安装node-sass</span>
   npm install sass<span class="token operator">-</span>loader <span class="token operator">--</span>save<span class="token operator">-</span>dev     <span class="token comment">//安装依赖包sass-loader</span>
   npm install style<span class="token operator">-</span>loader <span class="token operator">--</span>save<span class="token operator">-</span>dev     <span class="token comment">//安装style-loader</span>

2.在build文件夹下的webpack.base.conf.js的module下 rules里面添加配置

<span class="token punctuation">{</span>
    <span class="token property">test</span><span class="token punctuation">:</span> /\.sass$/<span class="token punctuation">,</span>
    <span class="token property">loaders</span><span class="token punctuation">:</span> [<span class="token string">'style'</span><span class="token punctuation">,</span> <span class="token string">'css'</span><span class="token punctuation">,</span> <span class="token string">'sass'</span>]
<span class="token punctuation">}</span><span class="token punctuation">,</span>

3.然后在用到的页面内添加：

<span class="token tag"><span class="token punctuation">&lt;</span>style <span class="token attr-name">scoped</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>scss<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token punctuation">&lt;/</span>style<span class="token punctuation">&gt;</span></span>

三个操作执行完毕，npm run dev 跑起来，无情报错 loaderContext.getResolve is not a function。
百度后发现，是因为安装的sass loader版本太高，降低版本即可，解决方案有两个：
1.找到项目的package.json文件，将里面的 "sass-loader"的版本更换掉。

<span class="token string">"sass-loader"</span><span class="token punctuation">:</span> <span class="token string">"^8.0.0"</span>，更换成了 <span class="token string">"sass-loader"</span><span class="token punctuation">:</span> <span class="token string">"^7.3.1"</span><span class="token punctuation">,</span>
注意这里需要将loader版本降低到8.0一下即可

PS：
新手特别需要注意，这里更换版本后，node_modules文件夹内loader版本并没有更改，需要删除掉node_modules，重新进行npm install下载依赖，才算是解决问题了。
2.命令行解决：

npm uninstall sass<span class="token operator">-</span>loader   <span class="token comment">//卸载当前版本   </span>
npm install sass<span class="token operator">-</span><span class="token label symbol">loader@</span><span class="token number">7.3</span><span class="token punctuation">.</span><span class="token number">1</span> <span class="token operator">--</span>save<span class="token operator">-</span>dev  <span class="token comment">//安装低版本</span>

欧啦

链接

近期文章

热门标签

新人福利，免费薅羊毛

============ 欢迎各位老板打赏~ ===========

与本文相关的文章

发表评论