炫意html5
最早CSS3和HTML5移动技术网站之一

Vue 应用 Sass、Scss、Less 和 Stylus

如果当时没有选择,内置的 webpack 仍然会被预配置为可以完成所有的处理,也可以手动安装相应的 webpack loader:

# Sass
npm install -D sass-loader node-sass
# Less
npm install -D less-loader less
# Stylus
npm install -D stylus-loader stylus

然后,就可以导入相应的文件类型,或在 .vue 文件中这样来使用:

<style lang="scss">
$color: red;
</style>

下面主要讲解一下vue中应用less或者sass的方法,以less为例(style.less)。

写在 vue 中的 less

所有vue文件的

,会被vue-loader处理编译到一个css文件中,最终自动通过link标签写入index.html(在vue-loader.conf.js中配置)

<style scoped lang="less">
.notFoundPage {
background-color: #0a8acd;
color: #fff;
position: relative;
h1 {
font-weight: 500;
}
}
</style>

<link href="https://www.linuxprobe.com/static/css/app.21d3ff57a1596ef90908ba816fbb9496.css" rel="stylesheet">

对于外 less 文件

在main.js中import style.less 。

此时webpack会把style.less和各个vue文件的less部分一起编译到同一个css文件,并在index.html的link中自动引入。

在webpack的入口文件entry中加上style.less,编译完的出口文件会被自动注入到index.html文件中。

entry: {
app: './src/main.js',
style: './src/style/style.less'
},

<script type="text/javascript" src="https://www.linuxprobe.com/static/js/style.c67fefaf3f60c5ca074a.js"></script>

注:在vue2.x的webpack.base.conf.js:

{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},

以上是针对.vue文件的处理规则,其中vueLoaderConfig是vue-cli自己定义的加载器,专门处理css样式。
vueLoaderConfig引用的utils.js:

return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}

所以不需要再在rules里写.css .less 的处理规则。

炫意HTML5 » Vue 应用 Sass、Scss、Less 和 Stylus

Java基础教程Android基础教程