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

【问题标题】：Webpack include foundation framework and app scss compiling to cssWebpack 包括基础框架和应用程序 scss 编译为 css
【发布时间】：2017-07-12 12:37:27
【问题描述】：

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

我有这样的项目结构：

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

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

这是我的 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 中正确包含这个过程。

非常感谢您对此的帮助。

【问题讨论】：

标签： webpack webpack-dev-server webpack-style-loader

【解决方案1】：

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

另外，为了将你的 scss 编译到一个 css 文件夹，你需要使用 webpack extract-text-webpack-plugin，info 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。看起来很有希望。

【讨论】：