編譯的SCSS文件轉換成css文件在特定的位置

Question

我有以下文件夾結構：

|- webpack.config.js 
|- src/ 
    |- main.js 
    |- some.other.js.files 
|- styles/ 
    |- app.scss 
    |- animation.scss 
    |- transition.scss 
|- public/ 
    |- js/ 
    |- app.js 

我已經的WebPack配置，使得它需要所有的CSS和JS文件，編譯它們作爲app.jspublic/js下。下面是配置：

module.exports = { 
    entry: './src/main.js', 
    output: { 
    path: path.to.public.js, 
    filename: 'app.js' 
    }, 
    module: { 
    rules: [ 
     { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, 
     { test: /\.scss$/, loaders: ["style-loader", "css-loader", "sass-loader"]}, 
    } 
} 

現在我想創建另一個SCSS文件，名爲static.scss，和而不是得到它添加到app.js其他人一樣，我希望它被編譯成一個獨立的CSS文件在public/css。這樣我就可以從存儲庫中其他位置的某些html文件鏈接到它。

我該怎麼做？

Answer 1

您可以使用Extract Text WebPack Plugin提取特定的目標css：https://webpack.js.org/plugins/extract-text-webpack-plugin/