免费软件库合集软件资料网站,创业做旅游网站,seo tdk,咸阳公司做网站常规步骤
1. 创建项目 使用vue cli 脚手架工具创建项目 vue create xxxx2. 创建全局样式文件 全局样式变量 路径#xff1a;/assets/styles/variables.scss //flex 布局变量
$--flex-direction: (row, column);
$--flex-position: (start/assets/styles/variables.scss //flex 布局变量
$--flex-direction: (row, column);
$--flex-position: (start, center, end);布局样式类 路径/assets/styles/layout.scss each $direction in $--flex-direction {.flex-#{$direction} {display: flex;flex-direction: #{$direction};}each $p1 in $--flex-position {each $p2 in $--flex-position {.flex-#{$direction}-#{$p1}-#{$p2} {display: flex;flex-direction: #{$direction};if $p1!center {justify-content: flex-#{$p1};} else {justify-content: #{$p1};}if $p2!center {align-items: flex-#{$p2};} else {align-items: #{$p2};}}}}
}3. 创建全局公用样式文件 全局共用样式 路径/assets/styles/main.scss import /assets/styles/layout.scss;div {extend .flex-row;
}
4. 引入全局公用样式 在App.vue或者main.js中映入均可 templaterouter-view /
/templatestyle langscss
import /assets/styles/main.scss;body {margin: 0;padding: 0;border: none;outline: none;
}
#app {position: absolute;top: 0;left: 0;width: 100%;height: 100%;font-family: 微软雅黑;color: #000000;
}
/style
5. 配置全局样式类文件 在vue.config.js中配置全局样式类具体配置方法可以参考vue cli官方文档 const { defineConfig } require(vue/cli-service);
module.exports defineConfig({transpileDependencies: true,css: {loaderOptions: {scss: {additionalData: import ~/assets/styles/variables.scss,~/assets/styles/layout.scss;}}}
});
FAQ
1. 样式被多次重复编译 原因 产生的原因是因为在vue.config.js中通过import指令导入了SCSS样式文件,并且在vue组件库内或者全局样式内再次引入导致样式类被多次重复编译 vue.config.js是vue编译的入口文件所以vue在编译时会先加载vue.config.js内配置的SCSS文件,而通过import指令导入的文件scss-loader会在编译后将已经编译的全局样式变量、样式类、带入到后续scss文件的编译中
解决方法
去掉多余的引用文件 例如以下代码在main.scss中引入了layout.scss文件而layout.scss文件已经在vue.config.js中配置了载入所以这里无需再引入 import /assets/styles/layout.scss;div {extend .flex-row;
}
使用use指令导入文件避免文件被多次编译
use /assets/styles/layout.scss as *;div {extend .flex-row;
}在vue.config.js中只配置工具性样式文件如果全局变量文件、全局样式类文件不要引入非工具性样式文件例如全局组件样式、main.scss等。所以同理在App.vue文件中只引入非工具性样式文件因为如果在App.vue文件中引入工具性样式文件是不生效的因为vue项目中只有在vue.config.js中配置的样式文件才会被编译到每个vue组件样式内 如以下代码同样会产生多次重复编译 const { defineConfig } require(vue/cli-service);
module.exports defineConfig({transpileDependencies: true,css: {loaderOptions: {scss: {additionalData: import ~/assets/styles/main.scss;}}}
});2. 样式类、变量名找不到 原因
原因1scss-loader在编译scss时是根据从上到下从前到后的顺序编译如果文件内的类名不在scss-loader的堆栈内时就会抛出以上错误原因2use导入的文件只对当前文件上下文有效不会成为全局属性
解决方法
原因1检查引入scss文件的顺序是否正确 例如如下代码当variables.scss文件位于layout.scss文件后时在编译layout.scss时就会抛出变量不存在错误因为此时scss-loader的堆栈中没有对应的变量 const { defineConfig } require(vue/cli-service);
module.exports defineConfig({transpileDependencies: true,css: {loaderOptions: {scss: {additionalData: import ~/assets/styles/layout.scss,~/assets/styles/variables.scss;}}}
});
原因2
如果报错位置是在scss文件中需要检查对应的文件是否被引入如果没有引入需要引入对应的文件如果报错位置是在vue组件内需要查看vue.config.js的配置中是否引入了对应的文件
3. use rules must be written before any other rules.
原因
原因1被引用文件内存在使用use指令导入而引用文件通过import指令导入被引用文件因为use指令不能和其他指令混合原因2use指令写在了 import指令后
解决方法
问题1所以在引用文件内使用use ‘xxxxx’ as * 作为导入语法
use ~/xxx/xxx as *;问题2所有的use指令必须放在最前面
use ~/xxx/xxx as *;
import ~/xxx/xx;4. Private members can’t be accessed from outside their modules.
原因
问题产生原因是当使用use导入文件后因为被应用文件在声明变量或方法时在方法时在变量名或方法名前添加了-或者_导致变量或方法成为了当前模块 的私有变量或私有方法通过use方法导入的文件都会被sass认为是一个单独的模块每个模块之间是相互独立的所以要想使用某个模块属性就必须是非私有属性这也就是为什么use可以避免样式被重复编译因为每个模块只会编译一次
解决方法
去掉非私有属性前的-和_
