前端框架VUE-CLI中使用SASS,SCSS

0

VUE-CLI中使用SASS,SCSS

阅读:3154 时间:2018年10月29日

VUE2的CLI默认是没有配置SASS与SCSS支持的。需要手动添加。安装依赖包npm install sass-loader node-sass2.修改webpack打包配置。在项目的build/webpack.base.conf.js文...

VUE2的CLI默认是没有配置SASS与SCSS支持的。需要手动添加。

  1. 安装依赖包

npm install sass-loader node-sass

2.修改webpack打包配置。

在项目的build/webpack.base.conf.js文件中,找到module对象下的rules,添加一个loader规则:

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

如图:

image.png

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为文件路径。

发表评论说说你的看法吧

精品模板蓝瞳原创精品网站模板

^