一、vue 项目中安装 sass 并使用
第一步:打开终端 cd 到项目目录,安装 sass 依赖包:
npm install sass-loader --save-dev
npm install node-sass --sava-dev
第二步:在 build 文件夹下的 webpack.base.conf.js 文件中的 rules 里面添加配置:
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
第三步:使用 scss 时候在所在的 style 样式标签上添加 lang=”scss” 即可应用对应的语法,否则报错:
<style lang="scss">
$color: red;
div {
color: $color;
}
</style>
二、vue 项目中安装 less 并使用
第一步:打开终端 cd 到项目目录,安装 less 依赖:
npm install less less-loader --save
第二步:在 build 文件夹下的 webpack.base.conf.js 文件中的 rules 里面添加配置:
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
}
第三步:使用 less 时候在所在的 style 样式标签上添加 lang=”less” 即可应用对应的语法,否则报错:
<style lang="less">
@color: red;
div {
color: @color;
}
</style>