vue - sass 的安装

安装依赖

npm install node-sass@4.14.1  --save-dev
npm install sass-loader@7.0.0 --save-dev
npm install style-loader // 如果项目中已经装了vue-style-loader , 可不装

// 安装成功之后 需要在 webpack.base.conf.js  文件中修改配置项 (后续实践证明 也可以不修改)
 module: {
   rules: [ // 在rules 中添加
      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass'],
      },
    ]
  },

安装成功后 在组件中可以直接使用:

<style lang="scss" scoped>

</style>

有些博客中有提到安装 style-loader, 如果项目中已经安装了 vue-style-loader 则可以不安装; 安装过过程中需要注意的是版本不兼容造成编译报错
在vue项目中直接导入scss 文件:

1. 安装 sass-resources-loader

npm install sass-resources-loader --save-dev

2. 修改配置文件

// 在build文件夹下的utils.js 修改配置项
// 原配置
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    style: generateLoaders('stylus')
  }
//  修改后的配置
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/css/common.scss')]
      }
    }),
    stylus: generateLoaders('stylus'),
    style: generateLoaders('stylus')
  }

3. 引入多个scss 文件
   -在配置项中的resources数组选项中多增加一个scss文件路径;
   -在common.scss 文件中用 "@import" 引入其他scss文件;