Vue introduces sASS public files

Cli3 scaffolding

1. src/assets/sass/index.scss

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

2. vue.config.js

module.exports = {
  '@import "@/assets/sass/1. SCSS "; @import "@/assets/sass/2.scss"; `
  css: {
    loaderOptions: {
      sass: {
        // The new sass-loader data needs to be prependData
        data: `@import "@/assets/sass/index.scss"; `}}}}Copy the code

Cli2 scaffolding

1. Create the index. SCSS file

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

2.Build utils.js

exports.cssLoaders = function (options) {... Code omission.......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')}}Copy the code

3.webpack.base.conf.js rules

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