javascript – SCSS文件没有编译成CSS使用Webpack做出反应

以下是我的文件夹结构& React项目的文件工作正常,但我无法使用extract-text-webpack-plugin通过Webpack通过SCSS添加CSS.让我知道我在配置上做错了什么.

文件夹结构 –

Webpack.config.js文件 –

@H_502_12@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$/,{test: /\.scss$/,loader: ExtractTextPlugin.extract("style-loader","css-loader")}
        ]
    },plugins: [HtmlWebpackPluginConfig,ExtractTextPluginConfig]
};

Package.json –

@H_502_12@{
  "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错误,所以我相信它只是配置不起作用.

最佳答案

您似乎缺少一个加载器(sass-loader)并错误地在模块中设置它们.

试试下面的例子：

@H_502_12@module.exports = {
    entry: './app/app.jsx',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中执行此操作的方法(使用规则和使用),但您的Webpack配置文件似乎适用于Webpack 1.

javascript – SCSS文件没有编译成CSS使用Webpack做出反应

猜你在找的CSS相关文章