vue中css写法_Vue中的CSS
有作⽤域的 CSS
当
/* 全局样式 */
css变量/* 本地样式 */
关于有作⽤域的CSS 官⽅⽂档在 这⾥
在 vue 项⽬⾥使⽤scss
安装node-sass 和 sass-loader :
export SASS_BINARY_SITE="/mirrors/node-sass"
npm install --save sass-loader node-sass
在Vue中使⽤ SCSS 变量
在 assets ⽬录下新建⼀个css ⽬录，然后在css ⽬录下新建⼀个 variables.scss⽂件存放我们的scss变量
安装 sass-resources-loader
npm install sass-resources-loader --save-dev
在项⽬build⽂件夹⾥到utils.js ，到下边代码
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
把上⾯这句scss: generateLoaders('sass')，改成如下：
scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
resources: solve(__dirname, '../src/assets/css/variables.scss')//这⾥按照你的⽂件路径填写
}
}
)
改完之后，重新运⾏npm run dev (不重新运⾏会报错)就可以了，⽆需再引⼊，就可以在我们任何组件⾥愉快地⽤我们的全局变量了
TIPS： 如果需要全局使⽤的除了变量还有其他的，⽐如mixin什么的，可以分类别在 assets/css下创建好scss⽂件，然后import到⼀个总的scss⽂件⾥，然后将这个总的scss ⽂件全局引⼊。或者，在utils.js ⽂件⾥的resources ⾥传⼊⼀个数组也可以。
引⼊CSS⽂件
1. 引⼊第三⽅ CSS
以引⼊ normalize.css 为例
⾸先安装 normalize.css:
npm install --save normalize.css
然后可以看到package.json⾥多了这个：
image.png
引⽤：
image.png
还是在控制台看：
image.png
normalize.css 和 reset.css的区别：
normalize.css ：统⼀默认样式，让你的页⾯的默认样式在每⼀个浏览器都是⼀样的
reset.css ： 重置样式
2. 引⼊⾃⼰写的CSS
在Vue 项⽬ 中引⼊⾃⼰写的 reset.scss
在 src/assets ⽂件夹下新建⼀个 reset.scss⽂件
image.png
reset.scss 中关于中⽂字体，可以参考这个⽹站： 跨平台 CSS 中⽂字体解决⽅案
在 main.js中引⼊
image.png
然后就可以在控制台看到我们的css已经成功引⼊了：
image.png
参考：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。