使用webpack從scss文件中提取css

Question

我正在嘗試使用webpack與我的asp.net mvc核心項目。我可以捆綁js文件。但我無法從scss文件中提取我的css。

var path = require('path'); 
var extractTextPlugin = require("extract-text-webpack-plugin"); 
var cleanWebpackPlugin = require('clean-webpack-plugin'); 

module.exports = { 
    entry: { 
     'role/role': './scripts/role/roleVM.ts', 
     main: './scripts/main.ts', 
     vendor: ["jquery"], 
    }, 
    output: { 
     filename: '[name].js', 
     path: path.resolve(__dirname, 'wwwroot/dist/js/') 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.tsx?$/, 
       loader: 'ts-loader', 
       exclude: /node_modules/, 
      }, 
      { 
       test: /\.scss$/, 
       use: extractTextPlugin.extract({ 
        use: [{ 
         loader: "css-loader", options: { 
          sourceMap: true 
         } 
        }, { 
         loader: "sass-loader", options: { 
          sourceMap: true 
         } 
        }], 
        fallback: 'style-loader' 
       }), 
       exclude: /node_modules/, 
      }, 
     ] 
    }, 
    plugins: [ 
     new cleanWebpackPlugin(['dist'], { 
      root: path.resolve(__dirname, 'wwwroot'), 
      verbose: true, 
      dry: false 
     }), 
     new extractTextPlugin("./css/main.css") 
    ], 
    resolve: { 
     extensions: [".tsx", ".ts", ".js", '.scss'] 
    } 
}; 

當我建立我的項目

，在CSS文件不創建

我的命令：

npm run build --color=always 
> project@1.0.0 build C:\project\src\test 
> webpack 
clean-webpack-plugin: C:\project\src\project\wwwroot\dist has been removed. 
ts-loader: Using typescript@2.4.2 and C:\project\src\project\tsconfig.json 
Hash: 2cdaff8d8177eedec094 
Version: webpack 3.5.3 
Time: 2203ms 
     Asset  Size Chunks     Chunk Names 
role/role.js 293 kB  0 [emitted] [big] role/role 
    vendor.js 271 kB  1 [emitted] [big] vendor 
    main.js 2.48 kB  2 [emitted]   main 
    [0] ./scripts/role/roleVM.ts 400 bytes {0} [built] 
    [2] ./scripts/main.ts 0 bytes {2} [built] 
    [3] multi jquery 28 bytes {1} [built] 

它看起來像它跳到通中提取文本插件。

從我的配置文件中缺少什麼？

我目前的項目結構：

└── Project 
    ├── wwwroot 
    │   └── scss 
    │  └── main.scss 
    └── scripts 
    │ └── main.ts 
    │ 
    └── webpack.config.js 

Answer 1

檢查你指的樣式文件的某處（導入它main.ts等）。否則，插件將無法工作，因爲它不會找到任何要提取的文件。

https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/354