0

我试图将 SASS 编译为 CSS，但它不起作用。Webpack 不会生成 css 文件。也许 webpack 配置中的某些东西是错误的，因为当我尝试这个项目时，它起作用了。

webpack.config.js

const BowerWebpackPlugin = require("bower-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const path = require("path");

const sassLoaders = [
  "css-loader",
  "sass-loader?indentedSyntax=sass&includePaths[]=" + path.resolve(__dirname, "./src"),
];

const config = {
    entry: './src/script/index.jsx',
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, "./build"),
        publicPath: 'http://localhost:8090/assets',
    },
    devtool: 'eval-source-map',
    module: {
        loaders: [
              {   
                test: /\.js[x]?$/, exclude: /node_modules/, loader: 'babel-loader'  
              },
              {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract("style-loader", sassLoaders.join("!")),
              },
        ]
    },
    plugins: [
        new BowerWebpackPlugin(),
        new ExtractTextPlugin("[name].css"),
    ],
    externals: {
        'react': 'React'
    },
    resolve: {
        extensions: ['', '.js', '.jsx', '.scss'],
        modulesDirectories: ["src", "node_modules", "bower_components"],
    }
};

module.exports = config;

包.json

{
  "scripts": {
    "start": "npm run serve | npm run dev",
    "serve": "./node_modules/.bin/http-server -p 8080",
    "dev": "webpack-dev-server --progress --colors --port 8090"
  },
  "name": "name",
  "version": "1.0.0",
  "description": "internal evidence application",
  "main": "index.js",
  "author": "author",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^5.8.22",
    "babel-loader": "^5.3.2",
    "extract-text-webpack-plugin": "^0.8.2",
    "react": "^0.13.3"
  },
  "devDependencies": {
    "babel-loader": "^5.3.2",
    "bower-webpack-plugin": "^0.1.8",
    "css-loader": "^0.16.0",
    "http-server": "^0.8.0",
    "jsx-loader": "^0.13.2",
    "node-sass": "^3.2.0",
    "path": "^0.11.14",
    "sass-loader": "^2.0.1",
    "style-loader": "^0.12.3",
    "webpack": "^1.11.0",
    "webpack-dev-server": "^1.10.1"
  }
}

项目结构

在此处输入图像描述

webpack-dev-server 的输出

...
Hash: d8029817acd9fe21718c  
Version: webpack 1.11.0
Time: 3884ms
    Asset    Size  Chunks             Chunk Names
bundle.js  871 kB       0  [emitted]  main
chunk    {0} bundle.js (main) 211 kB [rendered]
    [0] ./src/script/index.jsx 274 bytes {0} [built]
    [2] ./src/script/hello.jsx 456 bytes {0} [built]
    [3] jquery (bower component) 45 bytes {0} [built]
    [4] ./bower_components/jquery/dist/jquery.js 210 kB {0} [built]
     + 1 hidden modules
webpack: bundle is now VALID.
4

1 回答 1

2

对不起，我没有意识到我必须将 SCSS 包含到 JavaScript 文件中。

于 2015-08-24T21:33:05.120 回答