vue引入sass公共文件

cli3 脚手架

1. src/assets/sass/index.scss

$base-width:375;
@function vw($px){
  @return ($px/$base_width)*100vw;
}

2. vue.config.js

module.exports = {
  // 多个全局文件写法 `@import "@/assets/sass/1.scss";@import "@/assets/sass/2.scss";`
  css: {
    loaderOptions: {
      sass: {
        // 新版sass-loader data需改为prependData
        data: `@import "@/assets/sass/index.scss";`
      }
    }
  }
}

cli2 脚手架

1.创建index.scss文件

$base-width:375;
@function vw($px){
  @return ($px/$base_width)*100vw;
}
@function w(){
  @return 20px;
}

2.Build utils.js

exports.cssLoaders = function (options) {
    .......代码省略.......
    return {
        css: generateLoaders(),
        postcss: generateLoaders(),
        less: generateLoaders('less'),
        sass: generateLoaders('sass', { indentedSyntax: true }),
        scss: generateLoaders('sass').concat(
          {
            loader: 'sass-resources-loader',
            options: {
              resources: path.resolve(__dirname, '../src/assets/sass/index.scss')
            }
          }
        ),
        // scss: generateLoaders('sass'),
        stylus: generateLoaders('stylus'),
        styl: generateLoaders('stylus')
      }
  }

3.webpack.base.conf.js rules

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