vue,一路走来(17)--vue使用scss,并且全局引入公共scss样式

最近朋友问如何在vue项目中使用scss样式,想起之前项目是直接在main.js直接import css文件的,然而main.js不可以直接import scss文件。

import ‘./assets/css.css‘

src/assets/scss.scss

$border-color:#c58f5d;
.box{
    width:100px;
    height: 100px;
    border:1px solid #f40;
}

第一步:安装依赖

cnpm install node-sass --save-dev
cnpm install sass-loader --save-dev
cnpm install style-loader --save-dev
cnpm install sass-resources-loader --save-dev

第二步:配置build/utils.js

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

发现项目报错:Module build failed: TypeError: this.getResolve is not a function

sass-loader的版本过高导致的编译错误,当前最高版本是8.x,需要退回到7.3.1

运行:

npm uninstall sass-loader(卸载当前版本)

npm install sass7.3.1 --save-dev

最后在vue组件中的style标签中添加lang="scss",就ok了。这样我们就实现了全局引入scss。

<style lang="scss">
.box2{width:100px;height:100px;border:1px solid $border-color;}
</style>

 在webpack.base.conf.js中的module.rules添加如下配置,可以实现引入其余的scss文件

{
    test: /\.scss$/,
    loaders: ["style", "css", "sass"]
 },
<style lang="scss">
@import ‘../../assets/other.scss‘;
.box2{width:100px;height:100px;border:1px solid $border-color;}
</style>

相关推荐