在vue-cli建的vue項目中使用sass


前面已使用vue-cli新建了一個vue項目,參考  使用命令行創建一個vue項目的全部命令及結果

首先看下新建項目的頁面和代碼,有部分修改,可忽視,如下圖:

   

然后我們在頁面添加sass的代碼:

修改完保存后立即就報錯了:

      

 

在使用scss之前,我們首先需要安裝相關的插件: 這里參考的是:鏈接( vue 項目 使用sass )

$ npm install node-sass --save-dev

> node-sass@4.9.0 install F:\05 poverty alleviation project\poverty\node_modules\node-sass
> node scripts/install.js

Cached binary found at D:\nodejs\node_cache\node-sass\4.9.0\win32-x64-57_binding.node

> node-sass@4.9.0 postinstall F:\05 poverty alleviation project\poverty\node_modules\node-sass
> node scripts/build.js

Binary found at F:\05 poverty alleviation project\poverty\node_modules\node-sass\vendor\win32-x64-57\binding.node
Testing binary
Binary is fine
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ node-sass@4.9.0
added 73 packages from 83 contributors and audited 33411 packages in 40.38s
found 16 vulnerabilities (1 low, 10 moderate, 4 high, 1 critical)
  run `npm audit fix` to fix them, or `npm audit` for details

$ npm install sass-loader --save-dev
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ sass-loader@7.0.3
added 9 packages from 17 contributors and audited 33431 packages in 15.084s
found 16 vulnerabilities (1 low, 10 moderate, 4 high, 1 critical)
  run `npm audit fix` to fix them, or `npm audit` for details

安裝完重新啟動項目,如下圖,我們看到頁面是可以正常顯示了,用scss寫的樣式也起了作用哦 :)

這里不同於參考鏈接的是,不需要配置參考文說到的webpack.base.config.js,可是也能正常使用了。

而安裝上面的插件也是一次性就安裝成功的,沒有出現別的問題。

誰知道原因的可以留言哦,新手不是很懂這些配置文件。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM