安装命令如下

npm install node-sass@4.14.1
npm install sass-loader@7.3.1 --save-dev

–save 或者不写 会把信息记录到dependencies中 dependencies 用户发布环境，是线上（生产环境下）所需要的依赖包，ependencies依赖的包不仅开发环境能使用，生产环境也能使用

–save-dev 会把信息记录到 devDependencies 中 devDependencies 用于本地环境开发时候所需要的依赖包，发布到线上时是不需要其下的文件，只用于开发环境，不用于生产环境，因此不需要打包

安装完成

更改build 下utils.js文件

更改utils 更改内容如下

 scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          //你自己的scss全局文件的路径
          resources: path.resolve(__dirname, '../src/assets/css/public.scss')
        }
      }
),

更改 build webpack.base.conf.js文件

更改webpack 更改内容如下

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

html 文件下进行测试 html

注： lang=“scss"一定要加上

public.scss 文件 public.scss

  • @mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
  • @include 指令可以将混入（mixin）引入到文档中。

其他scss文件想使用公共文件样式 other

结束