关于vue-lic脚手架使用less和sass的配置

配置less

1. 修改webpack.config.js配置文件

{
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      }

2. npm下载安装包，-D代表使用依赖

cnpm i style-loader less-loader -D

3. .vue文件添加样式，加上scoped是为了在当前vue文件下生效，不写默认全局样式全局生效

<style scoped lang="less">
    li{
        a{
            color:red;
        }
    }
</style>

4. 运行，这里我没有打包成index.html文件，直接在cmd环境下运行 npm run dev
   可能会出现如下错误：loaderContext.getResolve is not a function
   
   因为下载的less-loader安装包版本太高导致不兼容，我们只需要重新下载less-loader低版本安装包就可以了，直接在后面加上@5，或者指定版本号

npm i less-loader@5

如果写了依赖可以在package.json中看到以下信息：

终止刚刚的服务器，在运行一次就可以啦！
字体颜色是刚刚设置的颜色：

配置sass

sass的配置跟less步骤一样，只是安装包不一样

1. 修改webpack.config.js配置文件

{
        test: /\.sass$/,
        loaders: ['style', 'css', 'sass']
      }

本来自动生成的配置上加上这两行

scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">

2. npm下载安装包

cnpm i sass-loader node-sass -D

3. .vue文件添加样式，文本为绿色

<style scoped  lang="scss">    
    li{
        a{
            color:green;
        }
    }

4. 运行，直接在cmd环境下运行 npm run dev
   可能又会出现版本不兼容的问题
   loaderContext.getResolve is not a function
   解决：

更换低版本包，或者一开始就指定版本。

cnpm i sass-loader@4 -D

重新运行npm run dev

5. 修改样式成功啦