前端框架VUE-CLI中使用SASS,SCSS
1
VUE-CLI中使用SASS,SCSS
VUE2的CLI默认是没有配置SASS与SCSS支持的。需要手动添加。安装依赖包npm install sass-loader node-sass2.修改webpack打包配置。在项目的build/webpack.base.conf.js文...
VUE2的CLI默认是没有配置SASS与SCSS支持的。需要手动添加。
安装依赖包
npm install sass-loader node-sass
2.修改webpack打包配置。
在项目的build/webpack.base.conf.js文件中，找到module对象下的rules,添加一个loader规则：
{ test: /\.sass$/,
loaders: ['style', 'css', 'sass']
}如图：
3.在.vue文件中的 <style>标签上添加 lang="scss"属性值就可以了。如
<style scoped lang="scss"></style>
4.以上只能在vue文件的style中写scss，如何引入.scss文件？
安装依赖包
npm install sass-resources-loader
修改build中的utils.js .找到
scss: generateLoaders('sass'),修改为
scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
//scss全局文件的路径
resources: path.resolve(__dirname, '../src/style/index.scss')
}
}
),其中/src/style/index.scss为文件路径。
