vue中安装sass，cli2配置---------cli3配置全局sass/scss变量

在项目中使用scss之前，先打开package.json,看看是否已经安装了sass需要的安装包！
1.node-sass
2.sass-loader
3.style-loader

如果没有可以进行安装运行语句

npm install node-sass --save
npm install sass-loader --save
npm install style-loader --save

或者

npm install node-sass sass-loader style-loader --save

安装完成之后package.json中会有这三个安装包
然后在vue文件中可以这样写

<style lang="scss" scoped>
  .nav{}
</style>

我在网上搜的资料有的需要去项目的build>webpack.base.conf.js>module>rules中添加一段话
我项目中没有添加也是好使的。如果安装包之后不好使，可以选择添加这句话试试

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

$\color{red}{cli2中如果想设置全局的/sass/scss变量，要新建以.scss为后缀的css文件，貌似还需要安装一个包}$

npm install sass-resources-loader --save

然后在build>util.js中

scss: generateLoaders('sass')

修改成:

scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
        resources: path.resolve(__dirname, '../src/assets/global.scss')
    }
  }
)

这样就可以新建.scss的文件了。

$\color{red}{cli3设置sass/scss全局变量，也是需要配置的，找了好久的资料，才找到如何设置，下面是设置方法}$

我在src/assets/scss/style.scss新建了一个style.scss文件，里面写了如下图代码

image

然后需要在vue.config.js里面进行配置，如果还不知道什么是vue.config.js的同学，去查询cli3官网，配置如下

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/assets/scss/style.scss";
        `
      }
    }
  }
}

上面代码的@代表了src目录

然后我在vue文件的style里面就可以这么写：

image

那么现在这样就是我们所需要的cli3配置全局变量

--------后续有新的改进会持续更新

vue中安装sass，cli2配置---------cli3配置全局sass/scss变量

推荐阅读更多精彩内容