Vue配置和scss问题

  1. 下载安装 node.js
  2. 安装 Vue CLI(脚手架)
    方式一:npm install -g @vue/cli(下载慢)
    方式二:①npm install -g cnpm --registry=https://registry.npm.taobao.org(下载快) ② cnpm install -g @vue/cli
  3. 查看脚手架是否安装成功
    vue --version
  4. 创建 Vue 工程
    vue create vue_first(工程名)
  5. 进入工程、启动工程
    cd vue_first
    npm run serve

在Vue中使用scss时:

  1. cnpm install node-sass --save-dev安装node-sass
  2. cnpm install sass-loader --save-dev安装依赖包sass-loader
  3. cnpm install style-loader --save-dev安装style-loader
    一般第二部很容易出现版本错误的问题,所以可以先将已经下载的删除,再重新指定版本下载:
  4. 卸载当前版本 npm uninstall sass-loader
  5. 安装指定版本 npm install sass-loader@5.0.0 --save-dev
### 配置 Vue 2 使用 SCSS 为了使 Vue 2 支持 SCSS,在项目中需安装必要的依赖并调整配置文件。 #### 安装依赖 通过命令行工具执行如下指令来添加所需的包: ```bash npm install node-sass sass-loader --save-dev ``` 此操作会将 `node-sass` `sass-loader` 加入开发环境下的依赖列表,从而允许编译 `.scss` 文件[^1]。 #### 修改 vue.config.js 进行全局配置 编辑项目的根目录下名为 `vue.config.js` 的文件(如果不存在则新建)。向该文件内加入以下内容以便于全局加载特定的 SCSS 文件: ```javascript module.exports = { css: { loaderOptions: { sass: { prependData: `@import "@/assets/style/common.scss";` } } }, }; ``` 上述代码片段的作用是在每次处理 SASS 或者 SCSS 文件之前自动导入指定路径下的公共样式表。这使得可以在整个应用程序范围内访问定义在此文件内的变量、混合宏以及其他可重用的选择器等资源[^3]。 #### 创建全局使用的 SCSS 文件 在 src/assets/styles/ 下创建 common.scss 文件用于放置希望被所有组件共享的 SCSS 规则,比如颜色主题、布局参数或是常用的函数与混入声明等等[^4]。 #### 组件内部使用 SCSS 当需要在一个单独的 .vue 单文件组件里应用 SCSS 样式时,只需按照下面的方式编写 `<style>` 块即可: ```html <style lang="scss"> /* Your styles here */ </style> ``` 这样就可以利用已有的 SCSS 功能特性来自由定制化页面外观了[^2]。 完成以上步骤之后记得重新启动开发服务器让更改生效。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值