如何使用Webpack& amp;编译SCSS到CSS ReactJS?

时间:2017-06-27 04:08:17

标签: css reactjs webpack sass

另一个ReactJS / Webpack n00b在这里。我已经在这个问题上看到了一千种不同的变化,但似乎对他人有用的东西并不适合我。

如何将/app/scss/styles.scss转换为/app/css/styles.css?

当我运行 npm start 时,所有内容似乎都正确编译(没有错误),但我无法找到已编译的styles.css文件。

的package.json

"dependencies": {
    "json-loader": "^0.5.4",
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
 },
 "devDependencies": {
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^2.1.2",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "webpack": "^2.2.0",
    "webpack-dev-server": "^2.5.0"
  }

webpack.config.js

var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
   template: __dirname + '/app/index.html',
   filename: 'index.html',
   inject: 'body'
});
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
   entry: __dirname + '/app/components/index.js',
   module: {
   loaders: [
    {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
     },
     {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: ExtractTextPlugin.extract('css-loader!sass-loader')
      }
    ]
  },
  output: {
    filename: 'compiled.js',
    path: __dirname + '/build'
  },
  plugins: [
    HTMLWebpackPluginConfig,
    new ExtractTextPlugin('/app/css/styles.css')
  ]
};

powershell(命令行)输出

              Asset     Size  Chunks                    Chunk Names
        compiled.js  1.06 MB       0  [emitted]  [big]  main
/app/css/styles.css   4.5 kB       0  [emitted]         main
         index.html  10.5 kB          [emitted]
        chunk    {0} compiled.js, /app/css/styles.css (main) 1.03 MB [entry] [rendered]
... yadda yadda ... 
[1] ./~/css-loader!./~/sass-loader/lib/loader.js!./app/scss/styles.scss 4.92 kB {0} [built]
webpack: Compiled successfully.

文件结构

  • [NameOfApp]
    • .babelrc
    • 的package.json
    • webpack.config.js
    • node_modules
    • 应用
      • 的index.html
      • SCSS
      • css(空)
      • components(js)

非常感谢任何帮助。绝望了。

0 个答案:

没有答案