How can I set up Express to use style.scss file instead of style.sass ?
It only recognizes style.sass with the following configuration.
app.js
// Sass setup
app.use(require('node-sass-middleware')({
src: path.join(__dirname, 'public/sass'),
dest: path.join(__dirname, 'public/css'),
indentedSyntax: true,
sourceMap: true,
outputStyle: 'compressed'
}));
Structure tree
-public
--stylesheets
---style.css
---style.css.map
---style.sass
I would like to use style.scss instead of style.sass.
If you want to use scss files, you can remove the key/value intentedSyntax. This option allows you to use scss files
app.use(require('node-sass-middleware')({
src: path.join(__dirname, 'public/sass'),
dest: path.join(__dirname, 'public/css'),
sourceMap: true,
outputStyle: 'compressed'
}));
However, say if you used indentedSyntax but wanted to use the file extension scss - then you'll have to make a decision.
use indentedSyntax (and keep .sass)
use .scss and ensure you have brackets in your scss files.
If you're using sass 3.x then you can use the above proposed solution.
Related
I am currently building my .vue files into single file components with Browserify.
The only problem with this is each SFC includes the Vue runtime into the file causing the filesize to be much larger than it needs to be since the Vue runtime is common code across multiple pages and SFCs.
I was hoping to use Browserify to separate it out and load the common across pages.
I've read a bunch of different articles on the topic, but haven't been able to make any of them work.
Here is how I am building my Vue SFCs and excluding the runtime:
b
.transform('vueify')
.transform(
{global: true},
envify({NODE_ENV: 'production'})
)
.external('vue')
.bundle()
Then I would like to just load the Javascript separately like so:
<script src="vue.runtime.min.js"></script>
<script src="built-sfc.js"></script>
I've tried a whole bunch of different combinations of building the SFCs and the Vue runtime, but nothing works and I have run out of ideas!
I figured it out eventually, part of the issue was other problems in the our Vue building in Grunt.
But this is the Grunt commands we have for buildings the runtime and SFCs separately
vueRuntime: {
expand: true,
cwd: 'node_modules/vue/dist/',
src: 'vue.runtime.min.js',
dest: 'js/libs',
ext: '.js',
extDot: 'first',
options: {
configure: b => b
.require('vue')
.transform(
// Required in order to process node_modules files
{global: true},
envify({NODE_ENV: 'production'})
)
.bundle(),
browserifyOptions: {
debug: false
}
}
},
vue: {
expand: true,
cwd: 'js/pages/',
src: '**/*.vue.js',
dest: 'js/pages',
ext: '.js',
extDot: 'first',
options: {
configure: b => b
.transform('vueify')
.transform(
// Required in order to process node_modules files
{global: true},
envify({NODE_ENV: 'production'})
)
.external('vue')
.bundle(),
browserifyOptions: {
debug: false
}
}
}
I need some assistance or at least to be pointed in the right direction. I am attempting to deploy a vuejs app using Vue CLI 3. When I run the build command the files are built into the dist folder, which works fine. There is also a js and css folder inside dist that contain the respective files. In my index.html is created the paths as /css/app.css or /js/app.js. I want the files to just be placed in the dist folder along with index.html and the paths to read simply app.css or app.js. My goal is to remove the /css/.
I am assuming this is accomplished in the vue.config.js by configuring webpack. I can’t seem to figure this out. I understand the baseURL setting but I can figure this part out..any help would be appreciated.
Thanks
it's answered here
https://github.com/vuejs/vue-cli/issues/1967
basically config should look like this
module.exports = {
chainWebpack: (config) => {
config.module
.rule('images')
.use('url-loader')
.tap(options => Object.assign({}, options, {
name: '[name].[ext]'
}));
},
css: {
extract: {
filename: '[name].css',
chunkFilename: '[name].css',
},
},
configureWebpack: {
output: {
filename: '[name].js',
chunkFilename: '[name].js',
}
}
};
I used the express-generator command to generate code. with CSS option as sass. It adds sassMiddleware. I changed the intendedSyntax option to false to get scss file instead of sass file. here is my code.
$ express --view=hbs --css=sass myapp
it generate
app.use(sassMiddleware({
src: path.join(__dirname, 'public'),
dest: path.join(__dirname, 'public'),
indentedSyntax: true, // true = .sass and false = .scss
sourceMap: true
}));
I changed indentedSyntax to false and added style.scss file. But it through 500 error on loading stylesheet.
stack trace
I use vue-cli, which depends on webpack2. I know vue-loader can compile .vue file, it can compile scss&autoprefixer successfully in .vue file,
but when I use require .scss file in a js file, autoprefixer does not work, how can i solve it?
I have try this(vue-loader.conf.js) but it does not work:
module.exports = {
loaders: utils.cssLoaders({
sourceMap: isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap,
extract: isProduction
}),
postcss: [
require('autoprefixer')({
browsers: ['last 7 versions']
})
]
}
By default Grunt compiles bootstrap.less into bootstrap.css. The question is how do I make it compile my custom styles.less where I am going to import all Bootstrap less files plus some of my own into styles.css?
In think there are many answers for that question. I think you should following the advice of #seven-phases-max and try to not modify the source code (or at least make minimal changes).
In your Gruntfile.js you will find, two Less compile arguments (compileCore and compileTheme):
less: {
compileCore: {
options: {
strictMath: true,
sourceMap: true,
outputSourceFiles: true,
sourceMapURL: '<%= pkg.name %>.css.map',
sourceMapFilename: 'dist/css/<%= pkg.name %>.css.map'
},
src: 'less/bootstrap.less',
dest: 'dist/css/<%= pkg.name %>.css'
},
compileTheme: {
options: {
strictMath: true,
sourceMap: true,
outputSourceFiles: true,
sourceMapURL: '<%= pkg.name %>-theme.css.map',
sourceMapFilename: 'dist/css/<%= pkg.name %>-theme.css.map'
},
src: 'less/theme.less',
dest: 'dist/css/<%= pkg.name %>-theme.css'
}
}
And the following task defined: grunt.registerTask('less-compile', ['less:compileCore', 'less:compileTheme']);
It should be easy to add your own sub task and compile argument. When doing that you can compile your styles.less into styles.css. Notice that you have a separated CSS file as result. Loading that file requires a extra http request.
Unless you import bootstrap's Less code in your styles.less you can also not reuse Bootstrap's variables and mixins. If you need a separated CSS file consider to create your styles.less as follows:
#import (reference) "bootstrap";
//your custom code here
In the case that you are able to compile all you code in a single CSS file, you can do the following:
Create a file custom.less and add your customization in that file. And save that file in the same folder as your bootstrap.less file.
Than write at the end of the bootstrap.less file the following code: #import "custom";
After that you can compile bootstrap as usually.
Alternatively create custom.less as follow:
#import "bootstrap";
//your custom code here
To compile custom.less instead of bootstrap.less by default you should have to modify your Gruntfile.js. In the CompileCore argument change the src option into src: 'less/custom.less',.