vue项目安装scss
新建vue 项目 vue init webpack myname
1、cnpm install sass-loader --save,
2,cnpm install node-sass --sava,
3、根目录下找到 build 文件下的 webpack/base/conf.js,找到 rules数组添加如下对象:
rules: [
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
},
4,在组件中style标签上添加属性 lang="scss",保存运行。
5、如果报错:Module build failed: TypeError: this.getResolve is not a function,
版本太高导致的,找到根目录下的package.json 里面的sass-loader配置,安装的时候是8.0.2,将版本号改为7.3.1,运行还报错就从新安装依赖,npm install,再次运行就可以了。
设置scss变量
1、安装 cnpm install sass-resources-loader --save
2、在src目录下的assets文件夹里面新建一个public.scss文件,用于存放所有的公共变量。
3,根目录下找到 build下的utils.js里面的scss: generateLoaders('sass')
改为:(其实就是在后面加concat的内容)
scss: generateLoaders('sass').concat(
{
loader:'sass-resources-loader',
options: {
resources: path.resolve(__dirname,'../src/assets/public.scss')
}
}
)
4、如若已经运行了项目,重新npm run dev ,组件中就可以使用全局变量了。
使用全局变量
1、在全局变量文件里面写入变量($),混合(@mixin,括号里面为默认值,可有可无),继承(%)等语法。关键词:
2、在组建中使用变量($+变量名),混合(@include),继承(@extend)。
ps:文章内容是综合网上的文章以及自己实践后的记录,如有侵权,请联系删除。