Tag: sass

使用webpack将.scss解压缩到css

我正在尝试将所有我的sass文件编译到一个style.css文件中， 如下所示 。 我安装了我的npm install –save-dev extract-text-webpack-plugin并且在我的webpack.config.dev.js中是下面的。 const path = require('path'); const webpack = require('webpack'); const WebpackNotifierPlugin = require('webpack-notifier'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { devtool: 'eval', entry: [ './src', ], output: { path: path.join(__dirname, 'dist'), filename: 'app.js', publicPath: '/', }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin(), new WebpackNotifierPlugin({ title: 'My Project Build' }), […]

如何正确configuration同构Web应用程序中的React-Toolbox没有“找不到资产”错误

我是一个初学webpack，node.js和基本到web开发。 我正在使用Redux / React / Isomorphic样板 。 我正在尝试为所有的表示组件使用React-Toolbox ，但是却无法构build/ bundle（npm run dev），因为它会抛出一个错误 – “找不到资产”。 请帮我解决这个问题。 我已经给出了所有的错误/configuration细节 运行错误 – 'npm run dev' ： [2] ==> ? API is running on port 3030 [2] ==> ? Send requests to http://localhost:3030 [1] [webpack-isomorphic-tools] [error] asset not found: ./node_modules/react-toolbox/lib/ripple/style.scss [1] [webpack-isomorphic-tools] [error] asset not found: ./node_modules/react-toolbox/lib/button/style.scss [0] ./src/containers/Survey/Survey.js [0] […]

Webpack强制通过CLI webpack工具重新渲染（重新编译，重新编译）

Somethimes的webpack不接受我对jsx和scss文件的更改 ，因此它不会编译更新的main.scss和main.js （有时）。 webpack运行在安装在高山linux轻量级环境中的docker容器中。 我想SSH入docker集装箱，并直接通过webpack命令行工具强行重新编译更改。 可能有一些像$ webpack –force-complie或者–force-watch之类的手动方式来手动运行main.scss和main.js的重build过程 有没有办法做到这一点？ 这里是我的webpack.config.js文件： const ExtractTextPlugin = require("extract-text-webpack-plugin"); const webpack = require("webpack"); const autoprefixer = require("autoprefixer"); if (process.env.NODE_ENV === "development") { require("dotenv").config(); } module.exports = { entry: "./assets/shared/main.jsx", output: { path: "public", publicPath: "/", filename: "main.js" }, module: { preLoaders: [ { test: /\.jsx?$/, exclude: /(node_modules)/, loader: "eslint-loader" } […]

Angular 2 CLI SCSS内联图像

我正在重新编写一个最初在Compass中编写的网站，但是我现在使用了很多内嵌的base64图像，现在我正在使用Angular2 CLI和node-sass，但是那个函数不可用，还有一个库sass-inline-image，但它需要一些configuration，我不确定把它放在哪里，有人知道如何解决这个问题？

Webpack sass @import

我得到一个很奇怪的错误/行为，经过几个小时的各种configurationtesting，我总是以下面同样的错误结束 ModuleBuildError: Module build failed: @import 'path/to/my/_partial.scss'; File to import not found or unreadable … 每当我用'npm run dev'进行第一次运行，下面的configuration一切正常，所有的.scss文件都很好地编译成一个.css文件在正确的文件夹中。 但是，当我修改或添加其中一个scss文件scss标记上面的错误引发。 但是，这是奇怪的部分，当我再次保存没有修改的构build再次通过，并在大多数情况下，控制台不显示构build日志，但CSS是正确重build。 起初，我正在寻找错误的pathconfiguration，但第一次运行正确build立，所以文件被发现…。 我一直在寻找一个解决scheme，但没有find任何东西，在我安装的软件包，webpackconfiguration和文件夹结构 我安装的软件包是： "scripts": { "dev": "set NODE_ENV=development && webpack –watch" } "webpack": "^2.1.0-beta.22" "resolve-url": "^0.2.1", "resolve-url-loader": "^1.6.1", "sass-loader": "^4.0.2", "style-loader": "^0.13.1", "css-loader": "^0.23.1", "node-sass": "^4.0.0", "extract-text-webpack-plugin": "^2.0.0-beta.4", "file-loader": "^0.9.0", "glob": "^7.1.1", "node-sass": "^4.0.0", "path": […]

webpack lektor bootstrap scss @importpath

我试图用lektor使用bootstrap。 按照这里find的说明，一切都按预期工作。 然后我用npm来安装jquery和bootstrap 。 “要求”在webpack/js/main.js jquery和bootstrap工作顺利。 但是当我试图 @import "bootstrap"; 在webpack/scss/main.scss我有以下几点： ERROR in ./~/css-loader!./~/sass-loader!./scss/main.scss Module build failed: @import "bootstrap"; ^ File to import not found or unreadable: bootstrap. Parent style sheet: stdin in /home/lysdexia/Projects/thing/webpack/scss/main.scss (line 4, column 1) 这导致我在节点searchpath上看到一堆不太有用的阅读。 我发现以下全部三个： @import "/home/lysdexia/Projects/thing/webpack/node_modules/bootstrap/dist/css/bootsrap.css"; @import "/bootstrap/dist/css/boostrap.css"; @import "/bootstrap.css"; 。 。 。 都似乎导入没有错误。 所有的scss例子都显示了一个简单的@import whatever; 我现在怀疑这可能是某个事物的简写，或者是一个不同configuration的假设。 不幸的是，当试图用一个引导类来@extend一个类给我一个The selector ".row" […]

SASS的节点和吞吐量 – 堆栈级别太深

尝试使用Gulp将我的SASS编译到.css文件中用于使用指南针，并希望切换到Gulp。 下面这个mixin不是由我创build的，而是正在使用。 其中一个头文件使用mixin bp（做一个断点） 而且这些问题有时也会发生，有时在Gulp运行sass编译时不会发生。 并不总是一样的精确点再现。 我也删除了css文件，并重新编译这个错误。 CSS仍然在那里，似乎工作。 我该怎么办？ 思考？ 错误插件'sass' 消息：afa / scss / layout / _header-search.scss SystemStackError：堆栈级别太深 on line 41 of afa/scss/layout/_header-search.scss —> @include bp（min-width，$ bp-medium + 1）{——— ^ 下面是来自文件本身的Mixin // ============================================= // Mixin – Breakpoint // ============================================= $mq-support: true !default; $mq-fixed-value: 1024px !default; @mixin bp($feature, $value) { // Set global device param […]

为什么我的AWS实例不能安装node-sass pacakage？

我使用Node创build了一个应用程序，并试图使用AWS的Elastic Beanstalk来托pipe它，但是当npm install到达node-sass时，它总是失败。 以下是日志中的错误： 5162错误node-sass@4.5.0 postinstall： node scripts/build.js 5162错误退出状态1 5163错误在node-sass@4.5.0 postinstall脚本'node scripts / build.js'失败。 5163错误请确保您安装了最新版本的node.js和npm。 5163错误如果这样做，这很可能是node-sass软件包的一个问题，5163错误与npm本身无关。 5163错误告诉作者，这在您的系统上失败：5163错误节点脚本/ build.js 5163错误您可以获得有关如何打开此项目的问题的信息：5163错误npm错误node-sass 5163错误或者，如果是没有可用的，你可以通过以下方式得到他们的信息：5163错误npm owner ls node-sass 5163错误上面可能还有其他日志logging输出。 5164 verbose exit [1，true] 这里是我的存储库： https ： //github.com/Jacob-Elder/react-socket.io-messaging 这是我的awsconfiguration 我search了这个问题，发现有些人用“–unsafe-perm”标志重新安装了node-sass，但这似乎不是一个权限问题。 我是新来的AWS和编码，所以任何帮助非常感谢！

针对节点应用程序的LibSass的SCSS编译器替代品

Libsass似乎是SCSS最受欢迎的编译器之一， http ://sass-lang.com/libsass列出了许多常用编程语言的各种libsass包装器。 对于一个节点应用程序， node-sass和相应的webpack或gulp加载器似乎是最明显的select。 然而，安装和使用node-sass需要github的访问权限和一个python 2.7的解释器，而我不想在这里讨论的原因，我没有在我的生产环境中。 在没有github访问权限和python解释器的情况下，在生产环境中安装和使用node-sass是否有一个可行的解决方法？ 是否还有其他SCSS – 编译器可以通过webpack或gulp使用，不需要Github访问和/或安装的Python解释器？

部署SailsJS到Openshift

我设法将应用程序部署到Openshift，设置端口/主机/分贝。 但是我的应用程序仍然没有运行，看起来像我的Gruntfile没有正常运行。 我在openshift/action_hooks里面创build了名为pre_start_nodejs ，内容如下： #!/bin/bash export NODE_ENV=production # If there is a grunt file, run $ grunt prod if [ -f "${OPENSHIFT_REPO_DIR}"/Gruntfile.js ]; then (cd "${OPENSHIFT_REPO_DIR}"; node_modules/grunt-cli/bin/grunt prod) fi 但是当我把我的代码推到openshift时，它就是这样说的 remote: Git Post-Receive Result: failure remote: Activation status: failure remote: Activation failed for the following gears: remote: 539077bd5973caf0320000d0 (Error activating gear: CLIENT_ERROR: Failed to execute: […]