SCSS文件未編譯到CSS中使用的WebPack

Question

以下反應是我的文件夾結構&文件爲React項目，這是工作的罰款，但我無法用extract-text-webpack-plugin通過Webpack通過SCSS添加CSS。讓我知道我在做什麼錯了配置。

文件夾結構 -

Webpack.config.js文件 -

const path = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ 
    template: './app/index.html', 
    filename: 'index.html', 
    inject: 'body' 
}); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const ExtractTextPluginConfig = new ExtractTextPlugin('main.css',{ 
    allChunks: true 
}); 

module.exports = { 
    entry: './app/app.jsx', 
    output: { 
     path: path.resolve('dist'), 
     filename: 'bundle.js' 
    }, 
    devtool: 'source-map', 
    module: { 
     loaders: [ 
      {test: /.js$/, loader: 'babel-loader', exclude: /node_modules/}, 
      {test: /.jsx$/, loader: 'babel-loader', exclude: /node_modules/}, 
      {test: /\.scss$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")} 
     ] 
    }, 
    plugins: [HtmlWebpackPluginConfig, ExtractTextPluginConfig] 
}; 

的package.json -

{ 
    "name": "reactyarn", 
    "version": "1.0.0", 
    "main": "index.js", 
    "license": "MIT", 
    "scripts": { 
    "start": "webpack-dev-server --hot" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.25.0", 
    "babel-loader": "^7.1.1", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "css-loader": "^0.28.4", 
    "extract-text-webpack-plugin": "^3.0.0", 
    "html-webpack-plugin": "^2.29.0", 
    "sass-loader": "^6.0.6", 
    "style-loader": "^0.18.2", 
    "webpack": "^3.3.0", 
    "webpack-dev-server": "^2.5.1" 
    }, 
    "dependencies": { 
    "path": "^0.12.7", 
    "react": "^15.6.1", 
    "react-dom": "^15.6.1" 
    } 
} 

僅供參考 -

我沒有收到在控制檯的任何JS錯誤，所以我認爲它僅是行不通的配置。

Answer 1

你似乎缺少了裝載機的一個（sass-loader），並在你的模塊錯誤地設置了起來。

試試下面的例子：

module.exports = { 
    entry: './app/app.jsx', 
    output: { 
     path: path.resolve('dist'), 
     filename: 'bundle.js' 
    }, 
    devtool: 'source-map', 
    module: { 
     loaders: [ 
      {test: /.js$/, loader: 'babel-loader', exclude: /node_modules/}, 
      {test: /.jsx$/, loader: 'babel-loader', exclude: /node_modules/}, 
      {test: /\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader'] // <-- this is new 
     ] 
    }, 
    sassLoader: { 
     includePaths: [path.resolve(__dirname, 'relative/path/to/scss')] 
    }, // <--- this is new 
    plugins: [HtmlWebpackPluginConfig, ExtractTextPluginConfig] 
}; 

使用ExtractPlugin.extract你引用手段的WebPack 2要做到這一點（使用rules和use），但你的WebPack配置文件似乎是朝的WebPack 1爲目標。