sass取付中のピット

1、プロジェクトでsass/scss機能を使用するには、まずプロジェクトにインストールする必要があります.インストール方法:

cnpm install node-sass --save-dev //  node-sass 
cnpm install sass-loader --save-dev //  sass-loader 
cnpm install style-loader --save-dev //  style-loader 

2、インストールが完了したらbuildフォルダの下のwebpackを見つけます.base.conf.jsファイル、rulesに構成を追加します:(新しいvueはutils.jsでsassを構成しています.この構成を追加する必要はありません)

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

3、使用時にstyleタグにlang=“scss” 。を追加
 
lang実行を追加するとエラーが検出されました:Model build failed:Type Error:this.getResolve is not a function at Object.loader..........
なぜならsass-loaderバージョンが高すぎるため、npm uninstall sass-loader(現在のバージョンをアンインストール)を実行し、低バージョンnpm install sassを再インストールする必要があります[email protected] --save-dev;
再コンパイルすればいいです.
*
*
*
共通スタイルをグローバルに導入する必要がある場合は、npm install sass-resources-loader--save-devインストール依存を先に実行する必要があります.
次にbuildのutilsをjsのscss:generateLoaders('sass')、に変更

scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
           resources: path.resolve(__dirname, '../src/style/public.scss')  //       

} } ),

この共通スタイルをコンポーネントで直接使用できるようになりました.使用方法はコンポーネントに導入されます.

プロジェクト全体の導入(グローバル導入)が必要な場合は、main.jsに直接導入できます:(エラーが発生した場合は、2番目のステップでsassを繰り返し構成し、webpack.base.conf.jsのsass構成を削除すればよいかもしれません)

import './style/public.scss'

完成!!!