Mac 安装 Sass 和使用

最新推荐文章于 2024-03-17 16:52:30 发布

huangpb0624

最新推荐文章于 2024-03-17 16:52:30 发布

阅读量3.8k

点赞数

分类专栏： HTML、CSS

本文链接：https://blog.youkuaiyun.com/huangpb123/article/details/79280387

版权

HTML、CSS 专栏收录该内容

23 篇文章

订阅专栏

本文介绍如何在Mac上安装Sass，并解决安装过程中遇到的权限问题和配置Webpack来支持Sass的方法。此外还提供了如何在WebStorm中配置Sass和Scss的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装ruby

Mac 的 OS X 系统自带 Ruby，所以 Mac 这步就可以跳过。

安装sass

$ gem install sass
如果出现permitted问题通常是权限问题，先尝试下面
$ sudo gem install sass
如果安装无限等待尝试下面替换RubyGems镜像

$ gem sources --remove https://rubygems.org/
//如果你系统不支持https用http
$ gem sources -a https://ruby.taobao.org/ 
$ gem sources -l
*** CURRENT SOURCES ***
https://ruby.taobao.org# 请确保只有 ruby.taobao.org
$ gem install sass

如果出现下面错误
ERROR: While executing gem ... (Errno::EPERM) Operation not permitted - /usr/bin/sass
尝试下面方法
$ sudo gem install -n /usr/local/bin sass
安装完成尝试查看sass版本
$ sass -v
参考网址：
http://www.w3cplus.com/sassguide/install.html
http://stackoverflow.com/questions/30812777/cannot-install-cocoa-pods-after-uninstalling-results-in-error/30851030#30851030

配置webstorm的sass和scss

1、打开偏好设置搜索"File Watcher"
2、点击"+"选择"compass sass"一路"Ok","Apply"
同样的方法添加"compass scss"
3、创建"stylesheet"文件是选择"scss"即可

Webpack 配置对 Sass

1. npm i sass-loader node-sass -D

2. 配置 webpack.config.js 的 Sass 相关部分

           {
             test: /\.(css|scss)$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'postcss-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ],
                exclude: /node_modules/
            },

3. 引用 sass 文件

//外部引入 sass 文件
import './styles/test.scss'

//在 .vue 中使用 sass
<style lang="sass">
    //sass语法样式
</style>