無法從單個.js條目（導入多個.scss文件）中提取多個.css文件？

我提出了這個問題在extract-text-webpack-plugin，但它似乎目前不支持此功能（我不知道）。無法從單個.js條目（導入多個.scss文件）中提取多個.css文件？

如何在下例中將main.scss和home.scss分解爲main.css和home.css？

結果：沒有錯誤，但只創建了home.css。

home.js

import '../scss/main.scss'; 
import '../scss/home.scss';

main.scss

.test1 { color: #f00; }

home.scss

.test2 { color: #00f; }

webpack.config.js

let webpack = require('webpack'); 
let ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    module: { 
    rules: [{ 
     test: /\.js$/, 
     exclude: /node_modules/, 
     use: 'babel-loader' 
    }, { 
     test: /\.scss$/, 
     use: ExtractTextPlugin.extract(['css-loader', 'sass-loader']) 
    }] 
    }, 
    entry: { 
    'home': './scripts/home.js' 
    }, 
    output: { 
    filename: '[name].js', 
    path: __dirname + '/static/scripts', 
    publicPath: '/static/' 
    }, 
    plugins: [ 
    new ExtractTextPlugin('../css/[name].css') 
    ] 
};

來源

2017-02-27 Tien Do

的WebPack創建每個條目的捆綁，所以如果你只有home進入和期待[name].css，你只能home.css。這是你可以做什麼，而不是：

webpack.config.js

entry: { 
    'home': './scripts/home.js', 
    'main': './scripts/main.js' 
}

與進口相關的SCSS文件均home.js和main.js。

一個清潔的解決辦法是分開的SCSS和js資產條目和使用數組項：

entry: { 
    'home': ['./scripts/home.js', './scss/home.scss'], 
    'main': ['./scripts/main.js', './scss/main.scss'] 
}

來源

2017-02-27 08:03:09 Ivan

當然，它的工作原理就是這樣，實際上我是在發佈這個問題之前做的。只是關於被質疑的案件。 –

@TienDo你的情況到底如何？在scsi文件中每個scss「import」包？這與webpack的工作原理是相反的。 – Ivan

是的，我想要它，但你說得對，它不是Webpack的方式:) –

-1

也許你應該改變你配置一點點：

{ 
    test: /\.scss$/, 
    loader: ExtractTextPlugin.extract(
     'style', 'css?sourceMap!sass?sourceMap' 
    ) 
}

和切入點：

app: [ 
    './scripts/home.js', 
    '../scss/main.scss', 
    '../scss/home.scss' 
]

來源

2017-02-27 10:59:29

無法從單個.js條目（導入多個.scss文件）中提取多個.css文件？

回答

相關問題