Vue 引入 SCSS

作者 : jamin 本文共657个字,预计阅读时间需要2分钟 发布时间: 2020-10-18 共1118人阅读

Vue 引入 SCSS

使用 vue init webpack 生成的 vue 模板项目中引入 scss 步骤:

  1. vue init my-project
  2. npm install node-sass@4 sass-loader@7 sass-resources-loader -D(兼容问题,需要使用旧版本的包)

    Similar to what @KostDM said, in my case it seems like sass-loader@11.0.0 doesn’t work with vue@2.6.12.

  3. 修改 build/utils.js 文件如下
// scss: generateLoaders('sass')

scss: generateLoaders('sass').concat({
  loader: 'sass-resources-loader',
  options: {
    resources: path.resolve(__dirname, '../src/assets/styles/index.scss'),
  },
})

之后在 main.js 中可以不需要再引入全局 scss 文件:

// import '@/assets/styles/index.scss'

就此,大功告成!

需要注意一点,新版本的 node-sasssass-loader 与 vue 不兼容,所以需要使用旧版本的包。

参考文档:

本站所提供的部分资源来自于网络,版权争议与本站无关,版权归原创者所有!仅限用于学习和研究目的,不得将上述内容资源用于商业或者非法用途,否则,一切后果请用户自负。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源。如果上述内容资对您的版权或者利益造成损害,请提供相应的资质证明,我们将于3个工作日内予以删除。本站不保证所提供下载的资源的准确性、安全性和完整性,源码仅供下载学习之用!如用于商业或者非法用途,与本站无关,一切后果请用户自负!本站也不承担用户因使用这些下载资源对自己和他人造成任何形式的损失或伤害。如有侵权、不妥之处,请联系站长以便删除!
金点网络 » Vue 引入 SCSS

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
是否提供免费更新服务?
持续更新,永久免费
是否经过安全检测?
安全无毒,放心食用

提供最优质的资源集合

立即加入 友好社区
×