首页 文章

Webpack包括基础框架和app scss编译到css

提问于
浏览 次
1

我想在我的项目中添加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中正确包含这个过程 .

很多人都感谢你的帮助 .

webpack webpack-dev-server webpack-style-loader

1 回答

  • 0

    你肯定是在正确的轨道上 . 首先，请确保安装了sass库的版本 . 我个人使用node-sass和webpack项目 . 更多信息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 . 看起来很有希望 .

    回复于

相关问题