Note 17 vueプロジェクト構築ピット(二)

ピット2:scssファイルがvueとwebpackのアップグレードを導入した後、scssの導入方法が少し変化し、一部の構成は自分で手動で書き込む必要があります.そうしないと、エラーが発生します.公式文書ははっきり書いてありますが、以前はよく見ていませんでした.まとめ:公式文書Using Pre-Processorsの具体的な記録を多く見ると、npm install sass-loader node-sass --save-devnpmインストールエラーが発生した場合、cnpmから使用できます.build/webpack.base.conf.js中修正rules:

/*       ：
{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: vueLoaderConfig
}
*/
//      ：
{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: {
      scss: 'vue-style-loader!css-loader!sass-loader', // 

外部.scssファイルを導入し、必要:npm install sass-resources-loader --save-devその後修正build/utils.js中generateLoaders(loader, loaderOptions)メソッドの戻り値、すなわちreturn .

  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/styles/index.scss')
        }
      }
    ),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

注記:../src/styles/index.scssscssファイルパスを指定します(ex:src/index.scss).
推荐阅读资料:[訳]Vue 2.0の変化(一)の基本APIの変化