vue项目用webpack全局引用某个scss

已于 2022-03-03 16:18:49 修改
阅读量254 收藏
点赞数
分类专栏： vue 文章标签： scss vue.js
于 2021-09-09 16:38:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_37541486/article/details/120204248
版权

首先引用scss
一、目录 package.json

"dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "node-sass": "^4.14.1",
 },
"devDependencies": {
    "sass-loader": "^7.3.1",
    "sass-resources-loader": "^2.2.3",
}

目录 build/utils.js

	sass: generateLoaders('sass', { indentedSyntax: true }),
	scss:generateLoaders('sass').concat(
        {
          loader: 'sass-resources-loader',
          options: {
            resources: path.resolve(__dirname, '../src/styles/index.scss')
          }
        }
    ),
vue项目内引入全局scss文件，可使用样式变量
天边逐云
07-23 1216
在webpack创建的项目下，找到build/utils.js文件，如下把红色的内容替换为黄色的： css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less'), sass: generateLoaders('sass', { indentedSyntax: true }), // scss: generateLoaders('sass'), scss: gener...
用webpack4.17版本手动配置vue的项目
MrzhangxianshengJS的博客
08-27 2137
用webpack4.17版本手动配置vue的项目 一 使用webpack最新版本 配置的初衷 现在webpack的版本已经升级到了4.0以上版本，增加了许多好用的功能，但是我们的vue-cli脚手架的webpack版本还是之前的3.0+的版本，许多功能已经被4.0所放弃了，现在webpack的4.0版本比较成熟，可以运用在项目中。刚进了一家新公司,新公司因为权限的问题不能使用脚手架，所以...
vue+webpack5项目中全局引入scss
weixin_42349568的博客
11-27 3696
一，安装插件 npm i sass-resources-loader -D 二，修改wenpack的rule配置 //全局引入scss变量 { test: /\.(css|scss|sass)$/, use: [ !prodMode ? 'style-loader' : { loader: MiniCssExtractPlugin.loader, optio
webpack配置全局scss
maohangfei.cn
11-20 1352
【代码】webpack配置全局scss。
vue3 webpack全局scss
lgldl的博客
11-23 775
module.exports = { chainWebpack: config => { const oneOfsMap = config.module.rule('scss').oneOfs.store oneOfsMap.forEach(item => { item .use('sass-resources-loader') .loader('sass-resour
demo12 webpack 处理 scss
weixin_33910137的博客
05-25 141
1.如何处理 scss sass-loader > css-loader > style-loader (以 <style> 标签形式添加到 html 中) 或 sass-loader > file-loader > style-loader/url (以 <link> 标签形式添加到 html 中) sass-loader: 处理 sass/scs...
vue cli webpack中使用sass的方法
08-27
在 Vue CLI 项目中使用 SASS 需要安装相应的依赖项和配置loader，下面将详细介绍 Vue CLI Webpack 中使用 SASS 的方法。 安装依赖 首先，需要安装 SASS 相关的依赖项，使用 npm 安装 sass-loader 和 node-sass： ...
webpack4手动搭建Vue项目
YUELEI118的博客
08-29 1460
学习总结1. 多看看webpack官网2. webpack的作用：配置一堆东西，达到运行程序的目的3. 无论什么东西都转成js，然后插入到一个空空的html文件中运行4. webpack就是个管理者，管理着一堆loader，一堆loader的作用就是把自己负责的东西弄成js。
【SCSS篇】Vite+Vue3项目全局引入scss文件
前端知识分享喵
10-12 5619
Vite+Vue3项目全局引入scss文件
从零开始一步一步搭建 Vue3 + Webpack5 项目脚手架指南
m0_61486963的博客
09-12 3217
从零开始一步一步搭建 Vue3 + Webpack5 项目脚手架指南
vue-cli 2.x中全局引用公共scss
小毛驴的博客
06-25 8376
1.安装scss 这些插件使我们使用scss所必须安装的 npm install node-sass --save-dev npm install sass-loader --save-dev npm install style-loader --save-dev 2.安装sass-resources-loader 这个插件是我们想要全局引用scss所要...
webpack中 打包scss 文件
业余前端的职业经历
08-14 651
安装loader npm i style-loader css-loader sass-loader node-sass -D 然后就是在webpack配置文件中进行配置 webpack.config.js module:{ rules:[ {test:/\.scss$/i,use:['style-loader','css-loader','sass-loader']} ] }
【Webpack】处理Sass和Scss资源详解
lph159的博客
09-22 1544
Sass（Syntactically Awesome Stylesheets）是一种扩展的 CSS 预处理器，允许开发者使用更加简洁的语法和变量、嵌套等特性编写 CSS 代码。Sass 语法：缩进式语法，使用缩进表示嵌套。Scss 语法：与 CSS 兼容的语法，使用大括号和分号。在现代开发中，Scss 语法更常用，因为它与标准的 CSS 语法更加兼容。无论你选择哪种语法，Sass 和 Scss 都能够极大地提高样式代码的可读性和可维护性。
webpack实现scss编译配置
weixin_30802273的博客
04-05 546
1、webpack.start.js: var webpack = require('webpack'); var SpritesmithPlugin = require('webpack-spritesmith'); var path = require('path'); var ExtractTextPlugin = require('extract-text-webpack-pl...
webpack中的style-resources-loader加载全局css变量
时清云的博客
02-09 3265
我们在项目中经常会遇到这种场景，抽离了一些公用的样式，并且还会定义一些变量，比如：variables , mixins , function，之前都是在每个样式文件中手动的@import导入。style-resources-loader的作用就是避免重复在每个样式文件中@import导入，在各个css 文件中能够直接使用 变量和公共的样式。 例如我们抽离了这样一个scss文件作为公用的样式。 common.scss内容如下： $themeColor: #3472FC; //主题色 $hoverColor:
webpack构建vue项目 基础02 之 css、scss、postcss、autoprefixer、去掉多余的css相关配置
weixin_43845137的博客
08-10 1688
webpack构建vue项目 基础02 之 css、scss、postcss、autoprefixer、去掉多余的css相关配置
webpack 中vue文件使用scss需要注意的地方
weixin_30410999的博客
09-16 285
需要使用npm添加node_sass和sass_loader 并且在配置文件中添加规则： { test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] } 前台写法： ...
webpack配置打包支持scss、自动import全局文件、分享变量、单独提取css文件、自动生成HTML页面
阿嚏乱码的地方
06-23 2331
支持scss webpack.config.js { test: /\.s[ac]ss$/i, use: [ 'style-loader', 'css-loader', 'sass-loader', ], }, scss自动import全局文件 webpack.config.js use: [ 'style-loader',
vue2+webpack4+scss
weixin_33814685的博客
01-30 534
作者：心叶时间：2019年01月30日 10:37 前要 由于webpack的配置具有实时性，之前搭建的vue2项目是基于webpack2，因此，特地在此维护一篇关于webpack4搭建vue2项目的说明，会及时更新（github地址：https://github.com/yelloxing/...）。 基础配置 npm install ...
vue项目怎么确保使用了支持 SCSS 的 loader
最新发布
10-10
在 Vue 项目中确保使用了支持 SCSS 的 loader，通常是通过配置 Webpack 来实现的。以下是在 Vue CLI 项目中添加 SCSS 支持的基本步骤： 1. **安装依赖**：如果你还没有安装必要的 SCSS 相关的loader，首先需要在项目根目录下运行以下命令： ``` npm install --save-dev node-sass sass-loader vue-cli-plugin-vuex-style-loader vue-cli-plugin-vuetify ``` `node-sass` 是处理 SCSS语法的库，`sass-loader` 负责将 SCSS 转换为 CSS，而 `vue-cli-plugin-vuex-style-loader` 和 `vue-cli-plugin-vuetify` 是针对 Vue CLI 的一些额外配置，它们可以帮助加载 SCSS，并管理组件内的样式。 2. **修改 `vue.config.js`**：打开项目的 `vue.config.js` 文件，找到 `chainWebpack` 函数并添加 SCSS 的配置： ```javascript module.exports = { //... configureWebpack: { module: { rules: [ { test: /\.s[ac]ss$/i, use: [&#39;vue-cli-plugin-vuex-style-loader&#39;, &#39;css-loader&#39;, &#39;sass-loader&#39;], }, ], }, }, }; ``` 这个配置告诉 Webpack 对 `.scss` 和 `.sass` 文件使用指定的 loader 链。 3. **启用全局 CSS 集成**：为了更好地管理和组织全局样式，可以在 `vue.config.js` 的 `configureWebpack` 中启用全局 CSS 集成： ```javascript chainWebpack(config) { config.module.rule(&#39;styles&#39;) .use(&#39;sass-resources-loader&#39;) .tap((options) => { options-resources = path.resolve(__dirname, &#39;src/assets/styles/global.scss&#39;); return options; }); }, ``` 以上步骤完成后，你应该能够在 Vue组件中使用 SCSS，并能正确编译和应用嵌套样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值