#####安装依赖； cnpm i sass-loader -D cnpm i node-sass -D node-sass尽量去使用cnpm去安装 创建index2.scss文件 div { h2 { background: pink; } } ####在main.js中引入 import "./
原创
2022-09-01 17:38:57
172阅读
webpack.config.js: const path = require('path'); const autoprefixer = require('autoprefixer'); const cssnano = require('cssnano'); const MiniCssExtrac
原创
2022-06-05 00:33:09
285阅读
npm npm i -D sass-loader node-sass webpack.config.js module.exports = { // ... module: { rules: [ { test: /\.(css|scss)$/, use: ['style-loader', 'css- ...
转载
2021-09-09 10:38:00
660阅读
2评论
1、安装插件 处理less： 处理sass： 2、项目目录： layer.less为： layer.js为： 3、webpack.config.js配置文件(以编译less为例) 注意：postcss-loader在css-loader后，在less-loader前。 4、执行编译&查看效果
转载
2017-09-15 11:25:00
153阅读
2评论
一、Scss
1.CSS有几个缺点
• 语法不够强大，没有变量和合理的样式复用机制
• 使得逻辑上相关的属性值必须以字面的形式重复输出，难以维护
• 动态的样式语言为css富裕了动态语言的特性
• 极大的提高了样式语言的可维护性
常见的样式语言：
1.scss/sass（scss兼容sass,scss更接近css的语法格式）
2.stylus
3.less
动态语言------css预处理-
首先安装eslint npm install eslint --save-dev 安装好这个工具后,初始化eslint npx eslint --init 这个时候会自动生成.eslintrc.js 然后去配置eslint,检测react 安装 npm install babel-eslint --
转载
2019-05-19 09:16:00
229阅读
2评论
loader：是webpack用来预处理模块的，在一个模块被引入之前，会预先使用loader处理模块的内容可能，你会遇到当你用webpack打包的时候，提示你需要一个loader来处理文件，那webpack中的loader就是帮助预处理下模块中的内容默认webpack只会处理js代码，所以当我们想要去打包其他内容时，让webpack处理其他类型的内容，就要使用相应的loader 使用方法
转载
2020-11-28 10:20:00
66阅读
本文介绍CSS、Sass、Scss的import中~（波浪线）的作用。
原创
2022-08-29 11:18:39
999阅读
操作函数1、for循环@for … from … through@for $var from <start> through <end> // 范围包括<start>和<end>的值1@for … from … to@for $var from <start> to <end> // 范围包括<start>,不包括
转载
2024-06-05 11:01:02
586阅读
react 没有配置 alias(别名) 引入文件的时候 只能通过 ../../ 的方式引入，项目大了 这样操作就比较繁琐麻烦 运行 npm eject 将配置暴露出来 找到 webpack.config.js 文件修改如下 const path = require('path'); const r ...
转载
2021-11-04 09:58:00
607阅读
2评论
一、安装 二、在webpack.config.js中配置module 1 2 3 4 5 6 7 8 9 module: { rules: [ { test: /\.js$/, exclude: /(node_modules|bower_components)/, loader: 'babel-lo
转载
2019-02-24 15:04:00
100阅读
2评论
使用webpack工具打包，通过配置Loader加载器中规则rules，更好的实现项目前端工程化。rules具体配置模块的读取和分析规则，通常用来Loader。rules:[]是一个数组，然后通过数组来存放，或则是描述，那些那些规则打包或是处理部分文件。配置一项rules时可以分一下几个条件配置：一、条件匹配：通过test、include(包含那些文件)、exclude（排除那些文件）这三个配置项
原创
2020-09-26 21:02:39
690阅读
webpack配置1. 安装安装nodejs,运行命令npm intall wepack –g 或者npm install webpack –save-dev进行全局和本地安装。安装指定版本，运行命令npm install webpack@1.12.x --save-dev如果需要使用webpack开发工具，请自行安装npm install webpack-dev-server
原创
2021-08-02 14:55:59
271阅读
使用npm安装webpack npm install webpack@5.42.1 webpack-cli@4.7.2 -D 在项目目录下面创建webpack.config.js文件并写入内容 // 使用Node.js中的导出语法，向外导出一个webpack的配置对象 module.exports ...
转载
2021-10-08 16:25:00
122阅读
2评论
webpack配置1. 安装安装nodejs,运行命令npm intall wepack –g 或者npm install webpack –save-dev进行全局和本地安装。安装指定版本，运行命令npm install webpack@1.12.x --save-dev如果需要使用webpack开发工具，请自行安装npm install webpack-dev-server
原创
2022-02-11 17:45:45
164阅读
本项目中的公共样式文件均位于 src/assets/css 目录下，其中 index.scss是总的样式文件的汇总入口 ，common.scss 是供全局使用的一
推荐
原创
2023-10-22 20:59:37
5570阅读
1. 样式文件目录介绍
本项目中的公共样式文件均位于 src/assets/css 目录下，其中 index.scss是总的样式文件的汇总入口 ，common.scss 是供全局使用的一些基本样式(常量）， _theme.scss、_handle.scss 两个文件是进行主题颜色配置的文件。
如下图，将 index.scss 在 main.js 文件中引入即可全局使用。.
2. 主题 sc
原创
2023-10-20 22:04:50
571阅读
2018年typescript发展的非常好，js是一门非常灵活的语言，所以一个功能，怎么写都能够写出来，但是这也会导致一个问题，不同人写js的方式不同，那么会导致同一个功能出现的代码风格会迥然不同。这样的话，如果是一个团队在做编程的过程中，每个人都按自己的语法去写代码的话，那么维护性就难以得到保证。
转载
2019-05-16 07:03:00
120阅读
2评论
首先通过npm安装less和less-loadernpm install less --save-devnpm install less-loader --save-dev然后在webpack中配置less-loader：modules:{ rules:[{ test:/\.vue$/, loader:'vue-loader',options:{ lo...
原创
2021-11-16 15:27:03
870阅读
有时往往需要一些全局样式，但用@import导入未免麻烦，这时可以使用vue插件style-resources-loader。 默认情况下 Vue.js 是不支持 Sass、Scss 的，如果想要使用它们，只需要一些简单的安装配置即可。 1、安装node-sass和sass-loader npm i ...
转载
2021-08-14 10:41:00
2915阅读
2评论
