Vue-cli 3.0 使用Sass Scss Less预处理器

前端  /  管理员 发布于 6年前   260

项目中使用预处理器，可以有效减少css代码量，使用Sass||Scss||Less;

预处理器

你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。如果当时没有选好，

内置的 webpack 仍然会被预配置为可以完成所有的处理。你也可以手动安装相应的 webpack loader：

# Sassnpm install -D sass-loader node-sass# Lessnpm install -D less-loader less# Stylusnpm install -D stylus-loader stylus

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

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

自动化导入

如果你想自动化导入文件 (用于颜色、变量、mixin……)，你可以使用 style-resources-loader。这里有一个关于 Stylus 的在每个单文件组件和 Stylus 文件中导入 ./src/styles/imports.styl 的例子：

// vue.config.jsconst path = require(‘path‘)module.exports = {  chainWebpack: config => {    const types = [‘vue-modules‘, ‘vue‘, ‘normal-modules‘, ‘normal‘]    types.forEach(type => addStyleResource(config.module.rule(‘stylus‘).oneOf(type)))  },}function addStyleResource (rule) {  rule.use(‘style-resource‘)    .loader(‘style-resources-loader‘)    .options({      patterns: [        path.resolve(__dirname, ‘./src/styles/imports.styl‘),      ],    })}

你也可以选择使用 vue-cli-plugin-style-resources-loader。更详细的请阅读vue-cli3文档