Webpack 包括基础框架和应用程序 css 编译为 css

Question

我想将 sass 编译添加到我的项目并编译我的 app.scss 文件，包括基础站点样式。

我有这样的项目结构：

-frontend
   -node_modules
   -src
      -css
      -scss
      -js
      index.html
   package.json
   webpack.config.js

我通过 npm 安装了基础框架。我想在我的 scss 目录中创建 app.scss 文件，导入那里的基础框架并将其编译为 css/app.css，它在我的应用 index.html 中链接

这是我的 webpack 配置：

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/index.js",
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
        }
      }
    ]
  },
  output: {
    path: __dirname + "/src/",
    filename: "index.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

我在我的包中安装了 sass-loader、style-loader 和 css-loader，但我不知道如何在 webpack 中正确地包含这个过程。

非常感谢您的帮助。

Answer 1

你绝对是在正确的轨道上。首先，请确保您安装了 sass 库的版本。我个人在 webpack 项目中使用 node-sass。更多信息 here。关于节点-sass.

此外，为了将您的 scss 编译到 css 文件夹，您将需要使用 webpack extract-text-webpack-plugin，信息 here。

需要配置顶部的插件：

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

安装插件后，可以像这样设置加载程序：

 module: {
    loaders: [
       {
         test: /\.jsx?$/,
         exclude: /(node_modules|bower_components)/,
         loader: 'babel-loader',
         query: {
           presets: ['react', 'es2015', 'stage-0'],
           plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
          }
        },
        { 
         test: /\.scss$/, 
         loader: ExtractTextPlugin.extract("style-loader","css-loader!sass-loader"),
        }
     ]
   },

你的插件是这样的：

  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new ExtractTextPlugin("./css/[name].css"),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
   ],

从这里开始，您所要做的就是在您的入口 js 文件中要求您的主 scss 文件，在您的情况下是 index.js。像这样：

require('./path/to/app.scss');

至于基础方面，我会研究这个https://www.npmjs.com/package/foundation-sites-loader。看起来很有希望。

Webpack 包括基础框架和应用程序 css 编译为 css

Webpack include foundation framework and app scss compiling to css

webpack

webpack-dev-server

webpack-style-loader