如何在vue脚手架中使用sass

最新推荐文章于 2023-05-13 17:56:20 发布

原创最新推荐文章于 2023-05-13 17:56:20 发布 · 817 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue脚手架SaaS使用与配置 #vue脚手架2配置sass #vue脚手架3配置sass #vue脚手架2使用sass #vue脚手架3使用sass

前端开发同时被 3 个专栏收录

6 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

sass

1 篇文章

订阅专栏

本文详细介绍了在Vue CLI 3中如何配置和使用SCSS，包括安装依赖、不同引用方式、以及如何引入全局变量。适用于希望在Vue项目中应用SCSS样式并进行高效开发的前端开发者。

scss的使用想必大家都知道，就不多说了

vue-cli3中sass的使用与配置

	scss for vue-cli3脚手架 需要安装node-sass / sass-loader

三种引用方式：

引入: <style lang=“scss” 使用: <xx class=“box”
引入: <style lang=“scss” module 使用: <xx class={$style.box}
引入: <style lang=“scss” scope 使用: <xx class=box

引入sass全局变量
在assets下定义文件： $theme-color: #300 > base.scss -> assets
配置webpack：
1） Vuevue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
data: @import "@/assets/css/base.scss";
}
}
}
}
2） node_modules/@vue/cli-service/lib/options.js
css: {
// extract: true,
// modules: false,
// localIdentName: ‘[name][local][hash:base64:5]’,
// sourceMap: false,
loaderOptions: {
sass: {
data: @import "@/assets/css/base.scss";
}
}
}

vue-cli2中sass的使用与配置

需要安装node-sass / sass-loader
配置: 在build文件夹下的webpack.base.conf.js的rules里面添加配置
{
test: /.scss$/,
loaders: [“style-loader”, “css-loader”, “sass-loader”]
}

引入: <style lang=“scss” 使用: <xx class=“box”
引入: <style lang=“scss” module 使用: <xx class={$style.box}
引入: <style lang=“scss” scope 使用: <xx class=box

引入sass全局变量
在assets下定义文件： $theme-color: ‘#300’ > base.scss > assets

安装: sass-resources-loader
配置webpack：在build/utils.js中修改配置

scss: generateLoaders(‘sass’).concat(
{
loader: ‘sass-resources-loader’,
options: {
resources: path.resolve(__dirname, ‘…/src/assets/scss/base.scss’)
//注意自己的路径
}
}
)

结束！！！