在项目中使用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"]
}
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的文件了。
我在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配置全局变量
--------后续有新的改进会持续更新
